<template>
  <el-row v-loading="loading" :gutter="18" element-loading-text="服务中断，重连中…" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <timeline ref="timeline" style="float: left; z-index: 9999" />
    <el-col v-show="showCunCheInfo" :span="cunCheSpan">
      <el-row>
        <el-col :span="20">
          <div class="page-home-header" style="border-bottom">
            <div class="home-title">站存车信息</div>
          </div>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-close" style="font-size: 28px; color: white" @click="closeCunCheInfo" />
        </el-col>
      </el-row>
      <el-row>
        <div class="block">
          <el-table ref="refsTable" :data="vehicleInfos" border fit height="800" highlight-current-row style="width: 100%">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.SWH }}</span>
              </template>
            </el-table-column>

            <el-table-column label="股道号" width="50" align="center">
              <template>
                <span>{{ clickedTrackName }}</span>
              </template>
            </el-table-column>

            <el-table-column label="车号" width="70" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.CH }}</span>
              </template>
            </el-table-column>

            <el-table-column label="车种" width="70" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.CZ }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-row>
    </el-col>
    <el-col :span="stationMapSpan">
      <el-row>
        <el-row>
          <div class="page-home-header" style="border-bottom">
            <div class="home-title">车辆实时信息</div>
            <ShowTime :style-obj="{ color: '#0ebfbf', 'font-size': '28px' }" />
          </div>
        </el-row>

        <el-row>
          <el-row class="row-header-gap">
            <el-col v-for="(item, index) in trainInfoTableHeader" :key="index" :span="item.span">{{ item.name }}</el-col>
          </el-row>
          <el-row v-for="(k, v) in trainInfo" :key="v" class="row-body-gap">
            <el-col v-for="(item, index) in k" :key="index" :span="item.span">{{ item.val }}</el-col>
          </el-row>
        </el-row>

        <el-row>
          <el-card class="box-card" style="margin-top: 10px" :body-style="{ padding: '0px 20px 20px 20px' }">
            <div class="map-header">
              <div class="block" label-width="70px" style="width: 180px; padding: 10px; color: #000; background-color: transparent; margin-left: 130px; margin-top: 5px">
                <div class="table-wrapper"></div>
              </div>

              <el-divider direction="vertical" />
              <div class="station-choose">
                <div class="prev-station" style="color: #f4f4f5" @click="clickPrevStation">
                  <span style="marginright: 6px; height: 21px">{{ prevStationName }}</span>
                  <i class="iconfont icon-a-jiantou" />
                </div>
                <div class="cur-station">
                  <el-dropdown @command="changeCurStation">
                    <span class="el-dropdown-link" style="fontsize: 28px; fontweight: 700; color: #f4f4f5">
                      {{ curStationName }}
                      <i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-for="(v, i) in this.allStationNames" :key="i" :command="i">{{ v }}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <div class="next-station" style="color: #f4f4f5" @click="clickNextStation">
                  <i class="iconfont icon-jiantou" />
                  <span style="marginleft: 6px; height: 21px">{{ nextStationName }}</span>
                </div>
              </div>
              <el-divider direction="vertical" />
              <div class="zoom-box"></div>
            </div>
            <div :class="mapClass" style="overflow: hidden">
              <icon name="iSTP" />
              <!-- <el-scrollbar ref="scrollDiv" style="height:100%" wrap-style="overflow-y:hidden;"> -->
              <div id="svgTemplate" ref="svg" style="height: 100%; background-color: #000" v-html="svgString" />
              <!-- </el-scrollbar> -->
            </div>
          </el-card>
        </el-row>
      </el-row>

      <el-row type="flex" justify="center" align="middle">
        <el-button :icon="toggleAlarmBtnIcon" size="mini" style="width: 100px; height: 20px" class="toggleBtn" @click="toggleAlarm" />
      </el-row>
      <el-row v-show="showAlarm">
        <div class="block">
          <el-table ref="refsTable" :data="playbackRealTimeAlarms.filter(alm => curStationName === '请选站' || curStationName === '所有站' || alm.alarm.stationName == curStationName)" border fit height="200" highlight-current-row style="width: 100%">
            <el-table-column label="持续报警" width="150" align="center">
              <template slot="header">
                <span style="font-size:23px">持续报警</span>
              </template>
            </el-table-column>
            <el-table-column label="站名" width="100" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.stationName }}</span>
              </template>
            </el-table-column>

            <el-table-column label="机车号" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.trainNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="作业单号" width="100" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.workNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="调机号" width="100" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.djNo }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="报警级别" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.alarmLevel }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="报警内容" align="center" width="auto">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.alarmContent }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发生时间" align="center" width="200">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.happenTime }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-row>
      <el-row v-show="showAlarm">
        <div class="block">
          <el-table :data="playbackRealTimeEvents.filter(alm => curStationName === '请选站' || curStationName === '所有站' || alm.alarm.stationName == curStationName)" border fit height="200" highlight-current-row style="width: 100%" ref="refsTable">
            <el-table-column label="一次性报警" width="150" align="center">
              <template slot="header">
                <span style="font-size:23px">一次性报警</span>
              </template>
            </el-table-column>
            <el-table-column label="站名" width="100" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.stationName }}</span>
              </template>
            </el-table-column>

            <el-table-column label="机车号" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.trainNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="作业单号" width="100" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.workNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="调机号" width="100" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.djNo }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="报警级别" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.alarmLevel }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="报警内容" align="center" width="auto">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.alarmContent }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发生时间" align="center" width="200">
              <template slot-scope="{ row }">
                <span>{{ row.alarm.happenTime }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-row>
    </el-col>
    <el-col :span="1" class="button-container">
      <el-button :icon="toggleZuoyedanBtnIcon" size="mini" style="width: 15px; height: 100px" class="toggleBtn" @click="toggleZuoyedan" />
    </el-col>
    <el-col v-show="showZuoyedan" :span="zuoyedanSpan">
      <el-row>
        <div class="page-home-header" style="border-bottom">
          <div class="home-title">调车作业单</div>
        </div>
      </el-row>
      <el-row>
        <div>
          <el-row>
            <el-row class="row-header-gap">
              <el-col :span="8">作业单号</el-col>
              <el-col :span="8">作业项目</el-col>
              <el-col :span="8">机车号</el-col>
            </el-row>
            <el-row class="row-body-gap">
              <el-col :span="8">
                <div>
                  <el-select v-model="curWorkItemNo" :style="{ width: '100px' }" @change="handleChangeWorkItemNo">
                    <el-option v-for="item in allStnZuoyeDanInfos[curStnNo]" :key="item.id" :label="item.workItemNo" :value="item.workItemNo" />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="8">{{ curWorkItem.zyxm }}</el-col>
              <el-col :span="8">{{ curWorkItem.locmotiveNo }}</el-col>
            </el-row>
          </el-row>

          <el-row>
            <el-row class="row-header-gap">
              <el-col :span="8">调车长</el-col>
              <el-col :span="8">编制人</el-col>
              <el-col :span="8">钩数</el-col>
            </el-row>
            <el-row class="row-body-gap">
              <el-col :span="8">{{ curWorkItem.diaoCheZhang }}</el-col>
              <el-col :span="8">{{ curWorkItem.bianZhiMan }}</el-col>
              <el-col :span="8">{{ curWorkItem.shuntNum }}钩</el-col>
            </el-row>
          </el-row>

          <el-row>
            <el-row class="row-header-gap">
              <el-col :span="8">计划开始</el-col>
              <el-col :span="8">计划结束</el-col>
              <el-col :span="8">编制时间</el-col>
            </el-row>
            <el-row class="row-body-gap">
              <el-col :span="8">{{ curWorkItem.beginTime }}</el-col>
              <el-col :span="8">{{ curWorkItem.endTime }}</el-col>
              <el-col :span="8">{{ curWorkItem.sendTime }}</el-col>
            </el-row>
          </el-row>
        </div>
      </el-row>
      <el-row>
        <div class="block">
          <el-table ref="refsTable" :data="curWorkItem.hungItemList" border height="600" highlight-current-row style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column label="钩号" width="50" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.hungNo }}</span>
              </template>
            </el-table-column>

            <el-table-column label="股道" width="50" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.gdName }}</span>
              </template>
            </el-table-column>

            <el-table-column label="状态" width="50" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.hungState === 1 ? '已抹' : '未抹' }}</span>
              </template>
            </el-table-column>

            <el-table-column label="作业方式" width="80" align="center">
              <template slot-scope="{ row }">
                <!-- <span>{{ row.workMethod === 0 ? '转线' : '转线' }}</span> -->
                <span>{{ row.workMethod === 0 ? '转线' : row.workMethod === 1 ? '挂' : row.workMethod === 2 ? '摘' : '未知' }}</span>
              </template>
            </el-table-column>

            <el-table-column label="车数" align="center" width="50">
              <template slot-scope="{ row }">
                <span> {{ getWorkMethod(row.workMethod) }} </span>
                <span> {{ row.numOfTrain }} </span>
              </template>
            </el-table-column>
            <el-table-column label="方向" width="50" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.sorW }}</span>
              </template>
            </el-table-column>
            <el-table-column label="记事栏" width="auto" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.tip }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="auto" align="center">
              <template slot-scope="{ row }">
                <el-popconfirm title="设置当前作业勾？" @confirm="handleClickWorkItem(row.hungNo, curWorkItem.stationNo, curWorkItem.workItemNo)">
                  <el-button slot="reference" type="primary" icon="el-icon-setting" size="mini" circle />
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-row>
    </el-col>

    <div>
      <el-dialog title="当前正在执行的任务" :visible.sync="taskListDialogFormVisible" width="80%">
        <div>
          <el-table ref="refsTable" v-loading="taskListLoading" :data="recvTaskList" border fit highlight-current-row style="width: 100%">
            <el-table-column label="序号" prop="id" align="center" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + (currentPage - 1) * pageSize }}</span>
              </template>
            </el-table-column>

            <el-table-column label="任务计划开始时间" width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.beginTime_plan }}</span>
              </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center" width="145">
              <template slot-scope="{ row }">
                <span>{{ row.createTime }}</span>
              </template>
            </el-table-column>

            <el-table-column label="任务删除时间" width="150" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.destroyTime }}</span>
              </template>
            </el-table-column>

            <el-table-column label="任务计划结束时间" align="center" width="150">
              <template slot-scope="{ row }">
                <span>{{ row.endTime_plan }}</span>
              </template>
            </el-table-column>

            <el-table-column label="状态" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ taskState(row.state) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="所属站号" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.station }}</span>
              </template>
            </el-table-column>

            <el-table-column label="实施地点" align="center" width="150">
              <template slot-scope="{ row }">
                <span>{{ row.workArea }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="delTask(scope.$index + (currentPage - 1) * pageSize)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div>
          <el-pagination background layout="total, sizes, prev, pager, next" :page-size="pageSize" :page-sizes="[10, 50, 100, 200, 500]" :total="taskInfoTotalDataLength" :current-page="currentPage" align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openAddTaskDialog">新增任务</el-button>
        </div>
      </el-dialog>

      <el-dialog title="新增任务" :visible.sync="addTaskDialogFormVisible">
        <el-form ref="addTaskInfo" :inline="true" :model="addTaskInfo" :rules="rules">
          <el-form-item label="任务计划开始时间" prop="beginTime_plan">
            <el-date-picker v-model="addTaskInfo.beginTime_plan" type="datetime" placeholder="选择日期时间" placement="bottom-start" />
          </el-form-item>
          <el-form-item label="任务计划结束时间" prop="endTime_plan">
            <el-date-picker v-model="addTaskInfo.endTime_plan" type="datetime" placeholder="选择日期时间" placement="bottom-start" />
          </el-form-item>
          <el-form-item label="所属站号" prop="station">
            <el-input v-model="addTaskInfo.station" autocomplete="off" />
          </el-form-item>

          <el-form-item label="任务实施地点" prop="workArea">
            <el-input v-model="addTaskInfo.workArea" autocomplete="off" />
          </el-form-item>

          <el-form-item>
            <el-button @click="addTaskDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addTask('addTaskInfo')">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog title="失去分路状态设置" :visible.sync="putSqflDialogFormVisible">
        <el-form :inline="true" :model="putSqflData">
          <el-form-item label="站号">
            <el-input v-model="putSqflData.stationNo" readonly="true" />
          </el-form-item>

          <el-form-item label="名称">
            <el-input v-model="putSqflData.trackName" readonly="true" />
          </el-form-item>

          <el-form-item label="类型">
            <el-radio-group v-model="putSqflData.type">
              <el-radio disabled label="1">区段</el-radio>
              <el-radio disabled label="2">道岔</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="失去分路状态">
            <el-radio-group v-model="putSqflData.status">
              <el-radio label="true">设置</el-radio>
              <el-radio label="false">取消</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button @click="putSqflDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="setSqfl">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </el-row>
</template>

<script>
document.onselectstart = function() {
  return false
}
// import $ from 'jquery'
// import layer from "layui-layer";
import Panzoom from '@panzoom/panzoom'
import timeline from './timeline'

import Vue from 'vue/dist/vue.esm.js'
import { getStationMap, getStationGeo, getStationInfos, getDSS, TWS, getStatus, getTrainPageInfos, getLineData, getVehiclesInfo, getTaskInfo, deleteTask, postTaskInfo, putSqfl } from '@/api/station'
import * as d3 from 'd3' // 在vue文件里面引入d3
import { createNamespacedHelpers } from 'vuex'
import axios from 'axios'
import { mapGetters } from 'vuex'
import ShowTime from '@/components/ShowTime'
import { Script } from 'vm'
import { first } from 'lodash'
import { getCurAllAlarm } from '@/api/alarmInfo'
import { getWorkItemHung } from '@/api/station'
import { getPlayBackId } from '@/api/playback'
import { updatePlayBackState } from '../../../api/playback'

Vue.prototype.axios = axios
const deviceStateStore = createNamespacedHelpers('deviceState')

const MASK_LAMPA_COLOR = 0x0000000f
const MASK_LAMPB_COLOR = 0x000000f0
const MASK_LAMPA_BLINK = 0x00000100
const MASK_LAMPB_BLINK = 0x00000200
const MASK_LAMP_CLOSE = 0x00000400
const MASK_SWITCH_SPLIT = 0x00000008
const MASK_SWITCH_NR = 0x00000010
const MASK_TRACK_OCCUPY = 0x00000001
const MASK_TRACK_LOCK = 0x00000002
const MASK_TRACK_LOST = 0x00000020
const MASK_COMMON_LOST = 0x00000020
const MASK_NORMAL_LOST = 0x00000040
const MASK_REVERSE_LOST = 0x00000080

const stateClassArray = ['Free', 'Occupy', 'Lock', 'Lost', 'None']
const colorClassArray = ['None', 'Red', 'Green', 'Yellow', 'White', 'Blue', 'Gray', 'Blink']
const switchClassArray = ['Normal', 'Reverse', 'SiKai', 'Unknown']

const zoomLevelPara = { 0: 0.3, 16: 0.65, 32: 1, 48: 1.4, 64: 1.8, 80: 2.2, 96: 3 }

export default {
  name: 'Sta',
  components: { ShowTime, timeline },
  data() {
    return {
      require: {
        // 需要订阅的频道放在这里
        channels: [],
        // 发出申请的组件名字放在这里
        component: 'station'
      },
      loading: false,
      netState: 'connect',
      requestState: false,
      trainNolist: [],
      station_rightIsDown: {},
      wftSvg: '',
      offsetX_1: 0,
      offsetY_1: 0,
      offsetX_2: 0,
      offsetY_2: 0,
      train_lists: [0, -1],
      train_list_stationmap: [],
      train_options: [],
      train_stationname_list: [],
      stationLineData: {},
      svgString: '',
      svgDom: null,
      allDom: null,
      svgString: '',
      svg: null,
      innerSvg: null,
      trainField: null,
      trailEntity: null,
      curStationIdx: 0,
      prevStationName: '无',
      curStationName: '请选站',
      nextStationName: '无',
      allStationNames: [],
      allStationNames_1: {},
      allStationPosition: [{}, { x: '3509', y: '779', width: '959', height: '935' }, { x: '2355', y: '1269', width: '257', height: '410' }, { x: '396', y: '1269', width: '1207', height: '963' }, {}],
      zoomLevel: 32,
      elementsClassType: [{ class: 'signal1', type: 'sig1', typeIdx: 0 }, { class: 'signal2', type: 'sig2', typeIdx: 0 }, { class: 'switch', type: 'switch', typeIdx: 1 }, { class: 'track', type: 'track', typeIdx: 2 }],
      test_data: {
        stationNo: 12,
        tracks: [
          {
            dname: '1G',
            dstate: 1
          },
          {
            dname: '2G',
            dstate: 1
          }
        ],
        signals: [
          {
            dname: 'X1',
            dstate: 0
          },
          {
            dname: 'S1',
            dstate: 0
          }
        ],
        switchs: [
          {
            dname: '1',
            dstate: 1
          },
          {
            dname: '2',
            dstate: 1
          }
        ]
      },

      new_test_data: {
        stationNo: 12,
        devices: [
          {
            dtype: 'track',
            dname: '1G',
            dstate: 1
          },
          {
            dtype: 'signal',
            dname: 'X1',
            dstate: 1
          },
          {
            dtype: 'switch',
            dname: '2',
            dstate: 1
          }
        ]
      },
      train_station_list: [],
      train_data: {
        deviceId: 1234,
        deviceType: 1,
        speed: 1000,
        handle: 1,
        mode: 1,
        dir: 2,
        upDownDir: 1,
        stationNo: 12,
        coverRoute: [
          {
            stationNo: 12,
            dType: 'track',
            dname: '6G'
          },
          {
            stationNo: 12,
            dType: 'switch',
            dname: '1',
            part: 'previous'
          }
        ],
        end1: {
          index: 0,
          offset: 50
        },
        end2: {
          index: 1,
          offset: -1
        },
        trainHead: 'end1'
      },

      train_data_2: {
        deviceId: 1234,
        deviceType: 1,
        speed: 1000,
        handle: 1,
        mode: 1,
        dir: 2,
        upDownDir: 1,
        stationNo: 12,
        coverRoute: [
          {
            stationNo: 12,
            dType: 'track',
            dname: '6G'
          },
          {
            stationNo: 12,
            dType: 'switch',
            dname: '1',
            part: 'previous'
          }
        ],
        end1: {
          index: 0,
          offset: 70
        },
        end2: {
          index: 1,
          offset: 30
        },
        trainHead: 'end1'
      },
      state: 0,
      train_data_3: {
        deviceId: 1235,
        deviceType: 1,
        speed: 1000,
        handle: 1,
        mode: 1,
        dir: 2,
        upDownDir: 1,
        stationNo: 12,
        coverRoute: [
          {
            stationNo: 12,
            dType: 'track',
            dname: '6G'
          },
          {
            stationNo: 12,
            dType: 'switch',
            dname: '1',
            part: 'previous'
          }
        ],
        end1: {
          index: 0,
          offset: 7
        },
        end2: {
          index: 1,
          offset: 6
        },
        trainHead: 'end1'
      },

      variables: {},

      vehicleInfoQueryData: {
        stationNo: '',
        trackName: ''
      },

      routeStationName: '',

      clickedTrackName: '',
      vehicleInfos: [],

      curShowAlarms: [],

      allStnZuoyeDanInfos: {},
      allStnInfos: {},
      curStnNo: 0,
      curStnName: '',
      curWorkItemNo: '',
      curWorkItem: {},
      firstWeimo: '',
      showAlarm: true,
      showZuoyedan: true,
      showCunCheInfo: false,
      toggleAlarmBtnIcon: 'el-icon-arrow-down',
      toggleZuoyedanBtnIcon: 'el-icon-arrow-right',
      zuoyedanSpan: 7,
      stationMapSpan: 16,
      cunCheSpan: 0,
      mapClass: 'map-body-show-alarm',
      taskListDialogFormVisible: false,
      postData: {
        id: '',
        trainNumber: 0
      },
      formLabelWidth: '100',
      delIdx: 0,

      taskListLoading: false,

      currentPage: 1,
      pageSize: 10,
      taskInfoTotalDataLength: 0,

      recvTaskList: [],
      delTaskIdx: 0,
      addTaskInfo: {
        beginTime_plan: new Date(new Date().getTime()),
        createTime: new Date(new Date().getTime()),
        creater: '',
        destroyTime: '',
        endTime_plan: new Date(new Date().getTime()),
        state: 0,
        station: 0,
        taskId: 0,
        updateBy: '',
        updateTime: '',
        workArea: ''
      },
      addTaskDialogFormVisible: false,
      rules: {
        beginTime_plan: [{ required: true, message: '请输入任务计划开始时间', trigger: 'change' }],
        endTime_plan: [{ required: true, message: '请输入任务计划结束时间', trigger: 'change' }],
        station: [{ required: true, message: '请输入任务所属站号', trigger: 'blur' }],
        workArea: [{ required: true, message: '请输入任务实施地点信息', trigger: 'blur' }]
      },
      trainInfo: {},
      trainInfoTableHeader: [],
      putSqflData: {
        stationNo: '',
        status: 'false',
        trackName: '',
        type: ''
      },
      putSqflDialogFormVisible: false,
      playbackRealTimeAlarms: [],
      playbackRealTimeEvents: []
    }
  },

  computed: {
    taskState() {
      return function(state) {
        if (state === 0) return '进行中'
        else if (state === 1) return '已销毁'
        else if (state === 2) return '已终止'
        return '未知'
      }
    }
  },
  created() {
    if (this.$route.query.stationName) this.routeStationName = this.$route.query.stationName
  },
  mounted() {
    //this.asyncGetCurAllAlarm()
    this.$store.subscribe(() => {
      if (this.$store.getters.serverStatus != 1 && this.netState == 'connect') {
        this.netState = 'reconnect'
        this.loading = true
        var interval = setInterval(() => {
          if (this.$store.getters.serverStatus == 1) {
            this.netState = 'connect'
            this.loading = false
            clearInterval(interval)

            getStationInfos()
              .then(response => {
                if (response.code == 0) {
                  {
                    getStatus()
                      .then(response => {
                        if (response.code == 0) {
                          for (var key_ in response.data) {
                            {
                              if (response.data[key_] == 0) {
                                getDSS()
                                  .then(response => {
                                    if (response.code == 0) this.renderOneStationDevices(response.data, response.data)
                                    else this.requestState = true
                                  })
                                  .catch(error => {
                                    if (error.message.includes('timeout')) {
                                      this.requestState = true
                                    }
                                  })
                              } else {
                                var data = {}
                                data.stationNo = key_
                                this.renderOneStationDevices(this.stationLineData[key_], data)
                              }
                            }
                          }
                        } else this.requestState = true
                      })
                      .catch(error => {
                        if (error.message.includes('timeout')) {
                          this.requestState = true
                        }
                      })
                  }

                  var i = 0
                  for (var key in this.train_stationname_list) {
                    this.train_options.push('{}')
                    this.train_options.pop()
                    this.train_options[key] = {
                      value: 1,
                      label: 1,
                      children: []
                    }
                    this.train_options[key].value = key
                    this.train_options[key].label = this.train_stationname_list[key] + ' ( 0 )'
                    this.train_options[key].children = []
                  }

                  TWS(1)
                    .then(response => {
                      if (response.code == 0) {
                        //  debugger
                        const that = this

                        var score
                        var length = 0

                        that.train_station_list = []
                        for (const key in response.data.deviceInfos) {
                          score = 1
                          for (var i = 0; i < length; i++) {
                            if (response.data.deviceInfos[key] == that.train_station_list[i][0]) {
                              that.train_station_list[i].push(key)
                              score = 0
                            }
                          }
                          if (score == 1) {
                            that.train_station_list[i] = []
                            that.train_station_list[i].push(response.data.deviceInfos[key])
                            that.train_station_list[i].push(key)
                            length = length + 1
                          }
                          var train_name = this.playBackId + '99TrainRTInfo:' + key + '_1'
                          var trainwarn_name = this.playBackId + '99TrainPreWarnInfo:' + key + '_1'
                          var train_detail_name = this.playBackId + '99TrainDetailInfo:' + key + '_1'
                          if (!that.require.channels.includes(train_name)) {
                            that.require.channels.push(train_name)
                            that.require.channels.push(trainwarn_name)
                            that.require.channels.push(train_detail_name)
                            that.$bus.$emit('Subscribe', that.require)
                            that.sockets.subscribe(train_name, res => {
                              // console.log(res.data.devices)
                              that.renderTrainDevice(res.data)
                            })
                            that.sockets.subscribe(trainwarn_name, res => {
                              // console.log(res.data.devices)
                            })
                            that.sockets.subscribe(train_detail_name, res => {
                              that.updateTrainInfo(res.data)
                            })
                          }
                        }
                        that.train_station_list.length = length
                        for (var j = 0; j < length; j++) {
                          for (var key in this.train_options) {
                            that.train_options[key].children = []
                          }
                          for (var l in that.train_options) {
                            if (that.train_options[l].value == that.train_station_list[j][0]) {
                              for (var i = 1; i < that.train_station_list[j].length; i++) {
                                that.train_options.push('{}')
                                that.train_options.pop()
                                that.train_options[l].children[i - 1] = {
                                  value: 1,
                                  label: 1
                                }
                                that.train_options[l].children[i - 1].value = that.train_station_list[j][i]
                                that.train_options[l].children[i - 1].label = that.trainNolist[that.train_station_list[j][i]]
                              }
                            }
                            that.train_options[l].label = that.train_stationname_list[l] + ' ( ' + that.train_options[l].children.length + ' )'
                          }
                        }
                      } else this.requestState = true
                    })
                    .catch(error => {
                      if (error.message.includes('timeout')) {
                        this.requestState = true
                      }
                    })
                } else this.requestState = true
              })
              .catch(error => {
                if (error.message.includes('timeout')) {
                  this.requestState = true
                }
              })
          }
        }, 1000)
      }
    })
    getPlayBackId().then(response => {
      // 加载获取回放ID
      this.playBackId = response.data
      // console.log(this.playBackId)
      this.$refs.timeline.updatePlayBackId()
      this.require.channels.push(this.playBackId + 'checkPlayBackState')
      this.require.channels.push(this.playBackId + 'SyncPlayBackTime')
      this.$bus.$emit('Subscribe', this.require)
      this.sockets.subscribe(this.playBackId + 'SyncPlayBackTime', res => {
        if (res.props.type == 'sync') {
          this.$refs.timeline.syncPlayBackTime(res.data)
        }
      })
      this.sockets.subscribe(this.playBackId + 'checkPlayBackState', res => {
        this.checkPlayBackState(this.playBackId)
      })
      getStationMap()
        .then(response => {
          if (response.code == 0) {
            this.wftSvg = response.data
            this.getSvg(this.wftSvg)
            getLineData()
              .then(response => {
                if (response.code == 0) {
                  for (var key in response.data) {
                    this.station_rightIsDown[key] = response.data[key].baseInfo.rightIsDown
                    this.stationLineData[key] = { stationNo: '', signals: {}, switchs: {}, tracks: {} }
                    this.stationLineData[key].stationNo = key
                    for (var key1 in response.data[key].signals) this.stationLineData[key].signals[response.data[key].signals[key1].name] = 0
                    for (var key2 in response.data[key].switchs) this.stationLineData[key].switchs[response.data[key].switchs[key2].name] = -1
                    for (var key3 in response.data[key].tracks) this.stationLineData[key].tracks[response.data[key].tracks[key3].name] = -1
                  }

                  for (var key in response.data) {
                    for (var i = 0; i < response.data[key].tracks.length; i++) {
                      var track_name = '#S' + key + '_' + response.data[key].tracks[i].name
                      track_name = track_name.replace(/\//g, '\\/')
                      if (d3.select(track_name))
                        d3.select(track_name)
                          .select('#track')
                          .attr('length', response.data[key].tracks[i].len)
                    }
                    for (var i = 0; i < response.data[key].switchs.length; i++) {
                      var switch_name = '#S' + key + '_' + response.data[key].switchs[i].name
                      d3.select(switch_name).attr('dir_type', response.data[key].switchs[i].dirType)
                      d3.select(switch_name)
                        .select('#common')
                        .attr('length', response.data[key].switchs[i].prevLen)
                      d3.select(switch_name)
                        .select('#reverse')
                        .attr('length', response.data[key].switchs[i].reverseLen)
                      d3.select(switch_name)
                        .select('#normal')
                        .attr('length', response.data[key].switchs[i].normalLen)
                    }
                  }
                } else this.requestState = true
              })
              .catch(error => {
                if (error.message.includes('timeout')) {
                  this.requestState = true
                }
              })
            getTrainPageInfos()
              .then(response => {
                if (response.code === 0) {
                  this.trainNolist = new Map()
                  for (var i = 0; i < response.data.length; i++) {
                    if (response.data[i].deviceType == 1) {
                      if (response.data[i].trainNo) this.trainNolist[response.data[i].deviceId] = response.data[i].trainNo
                      else this.trainNolist[response.data[i].deviceId] = response.data[i].deviceId
                    }
                  }
                } else this.requestState = true

                getStationInfos()
                  .then(response => {
                    if (response.code == 0) {
                      this.train_stationname_list = new Map()
                      getStatus(key)
                        .then(response => {
                          if (response.code == 0) {
                            for (var key_ in response.data) {
                              {
                                if (response.data[key_] == 0) {
                                  getDSS(key_)
                                    .then(response => {
                                      if (response.code == 0) this.renderOneStationDevices(response.data, response.data)
                                      else this.requestState = true
                                    })
                                    .catch(error => {
                                      if (error.message.includes('timeout')) {
                                        this.requestState = true
                                      }
                                    })
                                } else {
                                  var data = {}
                                  data.stationNo = key
                                  this.renderOneStationDevices(this.stationLineData[key], data)
                                }
                              }
                            }
                          } else this.requestState = true
                        })
                        .catch(error => {
                          if (error.message.includes('timeout')) {
                            this.requestState = true
                          }
                        })

                      for (var key in response.data) {
                        this.allStnInfos[key] = response.data[key].name
                        this.train_stationname_list[key] = response.data[key].name
                        var station_dss_name = this.playBackId + 'StationDSS:' + key
                        var real_event_name = this.playBackId + 'event:' + key
                        var workItem_name = this.playBackId + 'workItem:' + key
                        var vehicleInfo_name = 'VehicleInfoReturns'
                        this.require.channels.push(station_dss_name)
                        this.require.channels.push(this.playBackId + 'StationStatus:DSS')
                        this.require.channels.push(real_event_name)
                        this.require.channels.push(workItem_name)
                        this.require.channels.push(vehicleInfo_name)
                        this.$bus.$emit('Subscribe', this.require)
                        // 接收数据
                        this.sockets.subscribe(station_dss_name, res => {
                          this.renderOneStationDevices(res.data, res.props)
                        })
                        this.sockets.subscribe(this.playBackId + 'StationStatus:DSS', res => {
                          for (var key in res.data) {
                            if (res.data[key] != 0) {
                              var data = {}
                              data.stationNo = key
                              this.renderOneStationDevices(this.stationLineData[key], data)
                            }
                          }
                        })
                        this.sockets.subscribe(real_event_name, res => {
                          this.updateRealEvent(res.data, key)
                        })
                        this.sockets.subscribe(workItem_name, res => {
                          this.updateZuoyedan(res.data, key)
                        })
                        this.sockets.subscribe(vehicleInfo_name, res => {
                          this.updateTracksVehicleInfo(res.data)
                        })
                      }

                      var i = 0
                      for (var key in this.train_stationname_list) {
                        this.train_options.push('{}')
                        this.train_options.pop()
                        this.train_options[key] = {
                          value: 1,
                          label: 1,
                          children: []
                        }
                        this.train_options[key].value = key
                        this.train_options[key].label = this.train_stationname_list[key] + ' ( 0 )'
                        this.train_options[key].children = []
                      }

                      TWS(1)
                        .then(response => {
                          var data = {}
                          if (response.code == 0) {
                            //  debugger
                            const that = this

                            var score
                            var length = 0

                            that.train_station_list = []
                            for (const key in response.data.deviceInfos) {
                              score = 1
                              for (var i = 0; i < length; i++) {
                                if (response.data.deviceInfos[key] == that.train_station_list[i][0]) {
                                  that.train_station_list[i].push(key)
                                  score = 0
                                }
                              }
                              if (score == 1) {
                                that.train_station_list[i] = []
                                that.train_station_list[i].push(response.data.deviceInfos[key])
                                that.train_station_list[i].push(key)
                                length = length + 1
                              }
                              var train_name = this.playBackId + 'TrainRTInfo:' + key + '_1'
                              var trainwarn_name = this.playBackId + 'TrainPreWarnInfo:' + key + '_1'
                              var train_detail_name = this.playBackId + 'TrainDetailInfo:' + key + '_1'

                              if (!(key in trainInfo)) {
                                this.trainInfo[key] = []
                              }

                              if (!that.require.channels.includes(train_name)) {
                                that.require.channels.push(train_name)
                                that.require.channels.push(trainwarn_name)
                                that.require.channels.push(train_detail_name)
                                that.$bus.$emit('Subscribe', that.require)
                                that.sockets.subscribe(train_name, res => {
                                  // console.log(res.data.devices)
                                  that.renderTrainDevice(res.data)
                                })
                                that.sockets.subscribe(trainwarn_name, res => {
                                  // console.log(res.data.devices)
                                })
                                that.sockets.subscribe(train_detail_name, res => {
                                  that.updateTrainInfo(res.data)
                                })
                              }
                            }

                            that.train_station_list.length = length
                            for (var j = 0; j < length; j++) {
                              for (var key in this.train_options) {
                                that.train_options[key].children = []
                              }
                              for (var l in that.train_options) {
                                if (that.train_options[l].value == that.train_station_list[j][0]) {
                                  for (var i = 1; i < that.train_station_list[j].length; i++) {
                                    that.train_options.push('{}')
                                    that.train_options.pop()
                                    that.train_options[l].children[i - 1] = {
                                      value: 1,
                                      label: 1
                                    }
                                    that.train_options[l].children[i - 1].value = that.train_station_list[j][i]
                                    that.train_options[l].children[i - 1].label = that.trainNolist[that.train_station_list[j][i]]
                                  }
                                }
                                that.train_options[l].label = that.train_stationname_list[l] + ' ( ' + that.train_options[l].children.length + ' )'
                              }
                            }
                          } else this.requestState = true
                        })
                        .catch(error => {
                          if (error.message.includes('timeout')) {
                            this.requestState = true
                          }
                        })
                      this.allStationNames.push('所有站')
                      this.allStationNames_1['所有站'] = 0
                      for (var key in response.data) {
                        var stationname = '#S' + response.data[key].id + '_stationName'
                        var stationinfodata = d3.select(stationname)
                        if (stationinfodata._groups[0][0] != null) {
                          this.allStationNames.push(response.data[key].name)
                          this.allStationNames_1[response.data[key].name] = response.data[key].id
                        }
                      }
                      //this.allStationNames.push('所有站')
                      if (this.routeStationName) {
                        for (let i = 0; i < this.allStationNames.length; i++) {
                          if (this.allStationNames[i] === this.routeStationName) {
                            this.changeCurStation(i)
                          }
                        }
                        this.routeStationName = ''
                      }
                    } else this.requestState = true
                  })
                  .catch(error => {
                    if (error.message.includes('timeout')) {
                      this.requestState = true
                    }
                  })
              })
              .catch(error => {
                if (error.message.includes('timeout')) {
                  this.requestState = true
                }
              })
            this.require.channels.push(this.playBackId + 'alarm')
            this.require.channels.push(this.playBackId + 'TWS_Entitys:Train')
            this.$bus.$emit('Subscribe', this.require)
            this.sockets.subscribe(this.playBackId + 'alarm', res => {
              this.updateRealAlarm(res.data, 1)
            })
            this.sockets.subscribe(this.playBackId + 'TWS_Entitys:Train', res => {
              // console.log(res.data.devices)
              const that = this
              var length = 0
              var score = 1
              var state
              if (res.props.type == 'sync' || res.props.type == 'add') {
                this.createTrain(res)
              }
              if (res.props.type == 'change') {
                for (var key in res.data.deviceInfos) {
                  for (var i in that.train_station_list) {
                    var lenght = that.train_station_list[i].length
                    for (var j = 1; j < lenght; j++) {
                      if (key == that.train_station_list[i][j]) {
                        that.train_station_list[i].splice(that.train_station_list[i].indexOf(key), 1)
                      }
                    }
                  }
                  var state = 0
                  for (var i in that.train_station_list) if (that.train_station_list[i][0] == res.data.deviceInfos[key]) state = 1
                  if (state == 0) {
                    that.train_station_list[res.data.deviceInfos[key]] = []
                    that.train_station_list[res.data.deviceInfos[key]].push(res.data.deviceInfos[key])
                    that.train_station_list[res.data.deviceInfos[key]].push(key)
                  }

                  for (var key in res.data.deviceInfos) {
                    if (res.data.deviceInfos[key] != 0) {
                      this.createTrain(res)
                      if (this.train_lists[1] == key) {
                        this.train_lists[0] = String(res.data.deviceInfos[key])
                        this.train_lists[1] = key
                      }
                    } else {
                      if (this.train_lists[1] == key) {
                        this.train_lists = [0, -1]
                      }
                      this.deleteTrain(res)
                    }
                  }
                }
                for (var key in res.data.deviceInfos) {
                  if (res.data.deviceInfos[key] != 0) {
                    this.createTrain(res)
                    if (this.train_lists[1] == key) {
                      this.train_lists[0] = String(res.data.deviceInfos[key])
                      this.train_lists[1] = key
                    }
                  } else this.deleteTrain(res)
                }
              }
              if (res.props.type == 'delete') {
                this.deleteTrain(res)
              }
              for (var key in this.train_options) {
                this.train_options[key].children = []
              }
              for (var j in this.train_station_list) {
                for (var k = 1; k < this.train_station_list[j].length; k++) {
                  if (this.train_station_list[j][0] > 0) {
                    this.train_options[this.train_station_list[j][0]].children[k - 1] = {
                      value: 1,
                      label: 1
                    }
                    this.train_options.push('{}')
                    this.train_options.pop()
                    this.train_options[this.train_station_list[j][0]].children[k - 1].value = this.train_station_list[j][k]
                    this.train_options[this.train_station_list[j][0]].children[k - 1].label = this.trainNolist[this.train_station_list[j][k]]
                  }
                }
                if (this.train_station_list[j][0] > 0) this.train_options[this.train_station_list[j][0]].label = this.train_stationname_list[this.train_station_list[j][0]] + ' ( ' + this.train_options[this.train_station_list[j][0]].children.length + ' )'
              }
            })
          } else this.requestState = true
        })
        .catch(error => {
          if (error.message.includes('timeout')) {
            this.requestState = true
          }
        })
    })
    //  this.MouseD3();
    // //  svg 点击事件
    window['handleClick'] = function(e, currNodeId) {
      const tag = e.srcElement || e.target
    }
  },
  beforeDestroy() {
    updatePlayBackState(this.playBackId).then(res => {
      // console.log(res, 'res')
    })
  },
  destroyed() {
    for (var i = 0; i < this.require.channels.length; i++) this.sockets.unsubscribe(this.require.channels[i])
    // 关闭接收数据
  },
  methods: {
    checkPlayBackState() {
      updatePlayBackState(this.playBackId)
    },
    clearData() {
      // 清空码位 机车信息
      const that = this
      for (var key in this.stationLineData) {
        var data = {}
        data.stationNo = key
        this.renderOneStationDevices(this.stationLineData[key], data)
      }
      for (var key in this.train_list_stationmap) {
        var old_1 = '#T' + this.train_list_stationmap[key] + '_1'
        var old_2 = '#T' + this.train_list_stationmap[key] + '_2'
        var old_train1 = '#T' + this.train_list_stationmap[key] + '_text1'
        var old_train2 = '#T' + this.train_list_stationmap[key] + '_text2'
        var old_train1_1 = '#T' + this.train_list_stationmap[key] + '_text1_1'
        var old_train1_2 = '#T' + this.train_list_stationmap[key] + '_text1_2'
        var old_train1_3 = '#T' + this.train_list_stationmap[key] + '_text1_3'
        var old_train1_4 = '#T' + this.train_list_stationmap[key] + '_text1_4'
        var old_train2_1 = '#T' + this.train_list_stationmap[key] + '_text2_1'
        d3.select(old_1).remove()
        d3.select(old_train1).remove()
        d3.select(old_train2).remove()
        d3.select(old_train1_1).remove()
        d3.select(old_train1_2).remove()
        d3.select(old_train1_3).remove()
        d3.select(old_train1_4).remove()
        d3.select(old_train2_1).remove()
        d3.select(old_2).remove()
      }
      this.train_list_stationmap = []
      // let Layers = that.layerGroup.locomotiveLayerGroup.getLayers() //删除机车
      // Layers.map(function (layer) {
      //   that.layerGroup.locomotiveLayerGroup.removeLayer(layer)
      // })
      // let Layers1 = that.layerGroup.persionLayerGroup.getLayers() //删除人员
      // Layers1.map(function (layer) {
      //   that.layerGroup.persionLayerGroup.removeLayer(layer)
      // })
      // let Layers2 = that.layerGroup.persion2LayerGroup.getLayers() //删除人员
      // Layers2.map(function (layer) {
      //   that.layerGroup.persion2LayerGroup.removeLayer(layer)
      // })
      // let Layers3 = that.layerGroup.geofencingLayerGroup.getLayers() //删除人员
      // Layers3.map(function (layer) {
      //   that.layerGroup.geofencingLayerGroup.removeLayer(layer)
      // })
      this.person_station_list = []
      this.person_station_list2 = []
      this.person_data = []
      this.person_list = []
      this.station_task = []
      this.task_fence = []
      for (var key in this.person_options) {
        this.person_options[key].children = []
        this.person_options[key].label = this.train_stationname_list[key] + ' ( 0 )'
      }
      this.trainInfoTableHeader = []
      for (var key in this.train_options) {
        this.train_options[key].children = []
        this.train_options[key].label = this.train_stationname_list[key] + ' ( 0 )'
      }
    },
    addRealTimeAlarms(data) {
      this.ADD_ALARM(data)
    },
    addRealTimeEvents(data) {
      this.ADD_EVENT(data)
    },
    ADD_ALARM(arr) {
      var state = {}
      state.realTimeAlarms = this.playbackRealTimeAlarms
      var oldrealTimeAlarms = state.realTimeAlarms
      state.realTimeAlarms = []
      for (let i = 0; i < arr.length; i++) {
        let a = arr[i]
        state.realTimeAlarms.push({ alarm: a, flag: false })
      }
      for (let i = 0; i < state.realTimeAlarms.length; i++) {
        let a = state.realTimeAlarms[i].alarm
        for (let j = 0; j < oldrealTimeAlarms.length; j++) {
          let alm = oldrealTimeAlarms[j].alarm
          if (alm.happenTime === a.happenTime && alm.alarmContent === a.alarmContent && alm.stationName === a.stationName && alm.trainNo === a.trainNo && alm.workNo === a.workNo && alm.djNo === a.djNo) {
            state.realTimeAlarms[i].speakNumber = oldrealTimeAlarms[j].speakNumber
          }
        }
      }
      state.realTimeAlarms.sort((a, b) => {
        if (a.alarm.happenTime === b.alarm.happenTime) return a.alarm.alarmContent.localeCompare(b.alarm.alarmContent)
        else return Date.parse(a.alarm.happenTime) - Date.parse(b.alarm.happenTime)
      })

      while (state.realTimeAlarms.length > 99) {
        state.realTimeAlarms.shift()
      }

      let currentDt = new Date()
      for (let i = 0; i < state.realTimeAlarms.length; i++) {
        let alm = state.realTimeAlarms[i].alarm
        let diff = currentDt - Date.parse(alm.happenTime)
        if (diff > 24 * 3600000) {
          state.realTimeAlarms.shift()
        } else {
          break
        }
      }
      state.realTimeAlarms.reverse()
      this.playbackRealTimeAlarms = state.realTimeAlarms
    },
    ADD_EVENT(arr) {
      var state = {}
      state.realTimeEvents = this.playbackRealTimeEvents
      for (let i = 0; i < arr.length; i++) {
        let a = arr[i]
        let isExist = false
        for (let i = 0; i < state.realTimeEvents.length; i++) {
          let alm = state.realTimeEvents[i].alarm
          if (alm.happenTime === a.happenTime && alm.alarmContent === a.alarmContent && alm.stationName === a.stationName && alm.trainNo === a.trainNo && alm.workNo === a.workNo && alm.djNo === a.djNo) {
            isExist = true
            break
          }
        }

        if (!isExist) {
          state.realTimeEvents.push({ alarm: a, flag: false })
        }
      }

      state.realTimeEvents.sort((a, b) => {
        if (a.alarm.happenTime === b.alarm.happenTime) return a.alarm.alarmContent.localeCompare(b.alarm.alarmContent)
        else return Date.parse(a.alarm.happenTime) - Date.parse(b.alarm.happenTime)
      })

      while (state.realTimeEvents.length > 99) {
        state.realTimeEvents.shift()
      }

      let currentDt = new Date()
      for (let i = 0; i < state.realTimeEvents.length; i++) {
        let alm = state.realTimeEvents[i].alarm
        let diff = currentDt - Date.parse(alm.happenTime)
        if (diff > 24 * 3600000) {
          state.realTimeEvents.shift()
        } else {
          break
        }
      }
      state.realTimeEvents.reverse()
      this.playbackRealTimeEvents = state.realTimeEvents
    },
    async asyncGetCurAllAlarm() {
      const res = await getCurAllAlarm()
      if (res.code === 0 && res.data) {
        Object.keys(res.data).forEach(key => {
          this.addRealTimeAlarms(res.data[key])
        })
      }
    },

    async handleClickWorkItem(hungNo, stationNo, workItemNo) {
      const params = { hungNo: hungNo, stationNo: stationNo, workNumber: workItemNo }
      const res = await getWorkItemHung(params)
      if (res.code === 0) {
        this.$message.success('设置当前作业勾成功！')
      } else {
        this.$message.error('设置当前作业勾失败: ' + res.msg)
      }
    },

    reFreshHtml() {
      this.$router.go(0)
    },

    deleteTrain(res) {
      const that = this
      for (const key in res.data.deviceInfos) {
        if (res.data.deviceInfos[key] == 0) {
          {
            // 删除车辆距离信息
            this.trainInfo[key] = []
            {
              {
                var old_1 = '#T' + key + '_1'
                var old_2 = '#T' + key + '_2'
                var old_train1 = '#T' + key + '_text1'
                var old_train2 = '#T' + key + '_text2'
                var old_train1_1 = '#T' + key + '_text1_1'
                var old_train1_2 = '#T' + key + '_text1_2'
                var old_train1_3 = '#T' + key + '_text1_3'
                var old_train1_4 = '#T' + key + '_text1_4'
                var old_train2_1 = '#T' + key + '_text2_1'
                d3.select(old_1).remove()
                d3.select(old_train1).remove()
                d3.select(old_train2).remove()
                d3.select(old_train1_1).remove()
                d3.select(old_train1_2).remove()
                d3.select(old_train1_3).remove()
                d3.select(old_train1_4).remove()
                d3.select(old_train2_1).remove()
                d3.select(old_2).remove()
                // let Layers = that.layerGroup.locomotiveLayerGroup.getLayers();      //11.3 添加删除列车操作
                //   Layers.map(function (layer){
                //  if(layer.id==key)
                //   {
                //     that.layerGroup.locomotiveLayerGroup.removeLayer(layer)
                //   }
                // })

                var train_name = this.playBackId + 'TrainRTInfo:' + key + '_1'
                var trainwarn_name = this.playBackId + 'TrainPreWarnInfo:' + key + '_1'
                var train_detail_name = this.playBackId + 'TrainDetailInfo:' + key + '_1'
                // that.$bus.$emit('Unsubscribe', that.require)
                that.sockets.unsubscribe(train_name)
                that.sockets.unsubscribe(trainwarn_name)
                that.sockets.unsubscribe(train_detail_name)
                for (var i = 0; i < that.require.channels.length; i++) {
                  if (that.require.channels[i] == train_name) that.require.channels.splice(that.require.channels.indexOf(train_name), 1)
                  if (that.require.channels[i] == trainwarn_name) that.require.channels.splice(that.require.channels.indexOf(trainwarn_name), 1)
                  if (that.require.channels[i] == train_detail_name) that.require.channels.splice(that.require.channels.indexOf(train_detail_name), 1)
                }
              }
            }
          }
        }
      }
    },
    createTrain(res) {
      const that = this
      for (const key in res.data.deviceInfos) {
        var score = 1
        for (var i in that.train_station_list) {
          if (res.data.deviceInfos[key] == that.train_station_list[i][0]) {
            var state = 0
            for (const c in that.train_station_list[i]) if (key == that.train_station_list[i][c]) state = 1
            if (state == 0) {
              that.train_station_list[i].push(key)
              // if(that.station_sub_list.includes(that.person_station_list[i][0]))  //11.3修改车辆订阅逻辑
              {
                var train_name = this.playBackId + 'TrainRTInfo:' + key + '_1'
                var trainwarn_name = this.playBackId + 'TrainPreWarnInfo:' + key + '_1'
                var train_detail_name = this.playBackId + 'TrainDetailInfo:' + key + '_1'
                if (!that.require.channels.includes(train_name)) {
                  that.require.channels.push(train_name)
                  that.require.channels.push(trainwarn_name)
                  that.require.channels.push(train_detail_name)
                  that.$bus.$emit('Subscribe', that.require)
                  that.sockets.subscribe(train_name, res => {
                    that.renderTrainDevice(res.data)
                  })
                  that.sockets.subscribe(trainwarn_name, res => {})
                  that.sockets.subscribe(train_detail_name, res => {
                    that.updateTrainInfo(res.data)
                  })
                }
              }
            }
            score = 0
          }
        }
        if (i) i++
        else i = 0
        if (score == 1) {
          that.train_station_list[i] = []
          that.train_station_list[i].push(res.data.deviceInfos[key])
          that.train_station_list[i].push(key)
          // if(that.station_sub_list.includes(that.train_station_list[i][0]))  //11.4修改无车站订阅逻辑
          {
            var train_name = this.playBackId + 'TrainRTInfo:' + key + '_1'
            var trainwarn_name = this.playBackId + 'TrainPreWarnInfo:' + key + '_1'
            var train_detail_name = this.playBackId + 'TrainDetailInfo:' + key + '_1'
            if (!that.require.channels.includes(train_name)) {
              that.require.channels.push(train_name)
              that.require.channels.push(trainwarn_name)
              that.$bus.$emit('Subscribe', that.require)
              that.sockets.subscribe(train_name, res => {
                // console.log(res.data.devices)
                that.renderTrainDevice(res.data)
              })
              that.sockets.subscribe(trainwarn_name, res => {
                // console.log(res.data.devices)
              })
              that.sockets.subscribe(train_detail_name, res => {
                that.updateTrainInfo(res.data)
              })
            }
          }
        }
      }
      for (var key in this.train_options) {
        this.train_options[key].children = []
        this.train_options[key].label = this.train_stationname_list[key] + ' ( 0 )'
      }
      for (var j in this.train_station_list) {
        for (var k = 1; k < this.train_station_list[j].length; k++) {
          if (this.train_station_list[j][0] > 0) {
            this.train_options[this.train_station_list[j][0]].children[k - 1] = {
              value: 1,
              label: 1
            }
            this.train_options.push('{}')
            this.train_options.pop()
            this.train_options[this.train_station_list[j][0]].children[k - 1].value = this.train_station_list[j][k]
            this.train_options[this.train_station_list[j][0]].children[k - 1].label = this.trainNolist[this.train_station_list[j][k]]
          }
        }
        if (this.train_station_list[j][0] > 0) this.train_options[this.train_station_list[j][0]].label = this.train_stationname_list[this.train_station_list[j][0]] + ' ( ' + this.train_options[this.train_station_list[j][0]].children.length + ' )'
      }
    },
    selectChanged(value) {
      // 10.13修改列车跟踪逻辑
      this.curStationName = '请选择车站'
      // var x1=parseInt(d3.select('#T'+value+"_text1").attr('x'))-parseInt(300)
      // var y1=parseInt(d3.select('#T'+value+"_text1").attr('y'))-parseInt(150)
      // console.log(d3.select('#iSTP').attr('viewBox', x1+' '+y1+' '+500+' '+300))
      var x = -d3.select('#T' + value + '_text1').attr('x') * 4 + ((document.getElementById('svgTemplate').clientWidth - 17) / 2) * 3.33333 - 120
      var y = -d3.select('#T' + value + '_text1').attr('y') * 4 + ((document.getElementById('svgTemplate').clientHeight - 17) / 2) * 3.33333 - 120

      d3.select('#iSTP').attr('transform', 'translate(' + x + ',' + y + ') scale(4)')
    },

    changeCurStation(idx) {
      this.train_lists = [0, -1]
      // this.train_lists[1]=this.$router.currentRoute.query.deviceId
      this.curStationIdx = idx
      this.curStationName = this.allStationNames[idx]
      this.curStnName = this.curStationName
      this.handleChangeStation(this.curStnName)
      if (this.curStationName == '所有站') {
        d3.select('#iSTP').attr('transform', 'translate(0,0) scale(1.65)')
        d3.select('#iSTP').attr('style', 'background-color: rgb(0, 0, 0); border: 0px solid yellow;zoom:0.3')
      }
      var stationname = '#S' + this.allStationNames_1[this.curStationName] + '_stationName'

      var x =
        -d3
          .select(stationname)
          .select('text')
          .attr('x') *
          4 +
        ((document.getElementById('svgTemplate').clientWidth - 17) / 2) * 3.33333 -
        120
      var y =
        -d3
          .select(stationname)
          .select('text')
          .attr('y') * 4
      this.zoomLevel = 0
      if (this.curStationName != '所有站') d3.select('#iSTP').attr('transform', 'translate(' + x + ',' + y + ') scale(4)')
      if (idx === 0) {
        this.prevStationName = '无'
      } else {
        this.prevStationName = this.allStationNames[idx - 1]
      }
      if (idx === this.allStationNames.length - 1) {
        this.nextStationName = '无'
      } else {
        this.nextStationName = this.allStationNames[idx + 1]
      }
      this.state = 1
    },
    clickPrevStation() {
      if (this.curStationIdx !== 0) {
        this.changeCurStation(this.curStationIdx - 1)
      }
    },
    clickNextStation() {
      if (this.curStationIdx !== this.allStationNames.length - 1) {
        this.changeCurStation(this.curStationIdx + 1)
      }
    },
    formatZoomLevel(val) {
      return val / 16
    },
    zoomChange(val) {
      d3.select('#iSTP').attr('style', 'background-color: rgb(0, 0, 0); border: 0px solid yellow;zoom:' + zoomLevelPara[val])
      // console.log(d3.select('#iSTP').attr('style','background-color: rgb(0, 0, 0); border: 0px solid yellow;zoom:'+zoomLevelPara[val]))
    },
    getSvg(data) {
      const that = this
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://192.168.201.105:9527/#/linedata/stationMapData', true)
      // xhr.send();
      {
        const resXML = this.stringToXml(data) //  this.stringToXml(xhr.responseXML)

        this.svgDom = resXML.documentElement.cloneNode(true) // 克隆节点
        // const resXML = xhr.responseXML  //  this.stringToXml(xhr.responseXML)
        // this.svgDom = xhr.responseXML// 克隆节点
        // const resXML = (xhr.responseXML);
        // console.log(xhr.responseXML)
        // console.log(xhr.response)
        // this.svgDom = resXML.documentElement.cloneNode(true);
        // console.log(this.svgDom);
        // console.log(this.svgDom, '----->>>')
        // 为 svg - dom 设置宽高边框样式
        // this.svgDom.style.width = "100%";
        // this.svgDom.style.height = "40vh";
        this.svgDom.style.border = '0px solid yellow'
        // 为svg添加鼠标滚动缩放事件

        this.svgDom.setAttribute('transform-origin', '0 0') // 10.13添加
        // svg - a
        const adomNodeAll = this.svgDom.getElementsByTagName('a')
        //  循环修改节点样式 添加事件
        for (let i = 0; i < adomNodeAll.length; i++) {
          adomNodeAll[i].style.cursor = 'pointer' // 修改节点样式
          const currNodeId = adomNodeAll[i].getAttribute('id')
          adomNodeAll[i].setAttribute('v-on:click', "this.handleClick($event, '" + currNodeId + "')") // 为每个节点绑定点击事件
          const currNode = this.svgDom.getElementById(currNodeId)
        }
        //  设置 id 属性
        const gtag = this.svgDom.getElementsByTagName('g')
        // gtag[0].setAttribute("id", "svgcanvas");  //10.13修改

        /* 将svgDom对象转换成vue的虚拟dom */

        var oSerializer = new XMLSerializer()
        var sXML = oSerializer.serializeToString(this.svgDom)
        var Profile = Vue.extend({
          template: "<div id='svgTemplate' style='height:100%;background-color: #000;'>" + sXML + '</div>'
        })

        // 创建实例，并挂载到元素上
        new Profile().$mount('#svgTemplate')

        const elem = document.getElementById('iSTP')

        let zoomVal = 0 // 放大缩小累计值
        const zoomStepSize = 20 // 放大缩小每次改变的步长20
        let removeFlag = false // 控制点击拖动，区分未点击时的鼠标移动
        let zoomW = 41 // 初始值 > zoomStepSize * 2 初次滚动后即可得到准确的当前值
        let zoomH = 41 // 初始值 > zoomStepSize * 2 初次滚动后即可得到准确的当前值
        let zoomX = 0
        let zoomY = 0
        const startX = 0
        const startY = 0
        let endX = 0
        let endY = 0
        const moveX = 0
        const moveY = 0
        let vbCX = 0
        let vbCY = 0
        let vbCW = 0
        let vbCH = 0

        // svg标签
        const svgDom = document.getElementById('iSTP')
        svgDom.setAttribute('style', svgDom.getAttribute('style') + ';height: 100%;width: 100%;margin-right:1%;')
        d3.select('#iSTP').attr('transform', 'translate(0,0) scale(1.65)')
        d3.select('#iSTP').attr('style', 'background-color: rgb(0, 0, 0); border: 0px solid yellow;zoom:0.3')
        getCurrentVB()
        svgDom.addEventListener('mousedown', moveDownMouse)
        svgDom.addEventListener('mouseup', moveUpMouse)
        svgDom.addEventListener('mousemove', moveMouse)
        svgDom.addEventListener('mousewheel', MouseWheel)

        // 鼠标滚轮事件
        function MouseWheel(e) {
          // 10.13修改缩放逻辑  按中心点缩放逻辑为（transform偏移量）*new_scale/scale+(newscale-scale)/scale*鼠标偏移量
          const ev = e || window.event
          const down = true

          var scale = parseFloat(
            d3
              .select('#iSTP')
              .attr('transform')
              .split('scale(')[1]
              .split(')')[0]
          )
          if (scale > 5) scale = 5
          if (scale < 0.5) scale = 0.5
          var new_scale = scale + event.wheelDelta / 1200
          if (new_scale > 5) new_scale = 5
          if (new_scale < 0.5) new_scale = 0.5

          var endX =
            (new_scale / scale) *
              parseInt(
                d3
                  .select('#iSTP')
                  .attr('transform')
                  .split('(')[1]
                  .split(')')[0]
                  .split(',')[0]
              ) -
            (((new_scale - scale) / scale) * (event.clientX - document.getElementById('svgTemplate').getBoundingClientRect().left)) / 0.3
          var endY =
            (new_scale / scale) *
              parseInt(
                d3
                  .select('#iSTP')
                  .attr('transform')
                  .split('(')[1]
                  .split(')')[0]
                  .split(',')[1]
              ) -
            (((new_scale - scale) / scale) * (event.clientY - document.getElementById('svgTemplate').getBoundingClientRect().top)) / 0.3
          if (scale != 5 && new_scale != 5) d3.select('#iSTP').attr('transform', 'translate(' + endX + ',' + endY + ')' + '  scale(' + new_scale + ')')
          return false
        }
        function zoomIn() {
          if (zoomW > zoomStepSize * 2 && zoomH > zoomStepSize * 2) {
            zoomVal += zoomStepSize
            zoomTo('in')
          }
        }
        function zoomOut() {
          zoomVal -= zoomStepSize
          if (zoomVal >= -zoomStepSize * 11) {
            zoomTo('out')
          } else {
            zoomVal = -zoomStepSize * 11 // 最小缩至-220不能再缩了
          }
        }
        function zoomTo(flag) {
          // 变化之前获取当前viewBox的位置
          getCurrentVB()
          // *********** 放大缩小后的各值的计算 开始 ***********
          if (flag === 'in') {
            zoomX = vbCX + zoomStepSize
            zoomY = vbCY + zoomStepSize
            zoomW = vbCW - zoomStepSize * 2
            zoomH = vbCH - zoomStepSize * 2
          } else {
            zoomX = vbCX - zoomStepSize
            zoomY = vbCY - zoomStepSize
            zoomW = vbCW + zoomStepSize * 2
            zoomH = vbCH + zoomStepSize * 2
          }
          // *********** 放大缩小后的各值的计算 结束 ***********
          // 将计算的结果赋予viewBox刷新当前展示的视图位置
          // svgDom.setAttributeNS(null, 'viewBox', zoomX + ' ' + zoomY + ' ' + zoomW + ' ' + zoomH)
          // 变化之后获取当前viewBox的位置 保证了 vbCX vbCY vbCW vbCH始终为当前viewBox的值
          endZoom()
        }
        function endZoom() {
          getCurrentVB()
          // 视图发生系列缩放改变后最终的(x, y)坐标记录下来，用于放大后拖动
          endX = vbCX
          endY = vbCY
        }

        // 鼠标点击事件
        function moveDownMouse(evt) {
          const event = window.event || evt
          this.dragging = true
          that.offsetX_1 = event.clientX
          that.offsetY_1 = event.clientY
          that.offsetX_2 = event.clientX
          that.offsetY_2 = event.clientY
        }
        // 鼠标移动事件
        function moveMouse(evt) {
          const event = window.event || evt
          if (!this.dragging) {
            return
          }
          const nx = event.clientX
          const ny = event.clientY

          that.offsetX_2 = event.clientX
          that.offsetY_2 = event.clientY
        }
        // 鼠标点击后松开事件
        function moveUpMouse(evt) {
          this.dragging = false

          // svgDom.setAttributeNS(null, 'style', 'cursor: default')
          // 视图发生系列移动后最终的(x, y)坐标记录下来，用于放大后拖动
          {
            endX =
              parseInt(
                d3
                  .select('#iSTP')
                  .attr('transform')
                  .split('(')[1]
                  .split(')')[0]
                  .split(',')[0]
              ) +
              (that.offsetX_2 - that.offsetX_1) * 3

            endY =
              parseInt(
                d3
                  .select('#iSTP')
                  .attr('transform')
                  .split('(')[1]
                  .split(')')[0]
                  .split(',')[1]
              ) +
              (that.offsetY_2 - that.offsetY_1) * 3
          }
          var scale = parseFloat(
            d3
              .select('#iSTP')
              .attr('transform')
              .split('scale(')[1]
              .split(')')[0]
          )

          removeFlag = false

          d3.select('#iSTP').attr('transform', 'translate(' + endX + ',' + endY + ')' + '  scale(' + scale + ')')
        }

        // 获取当前视图VB的位置信息
        function getCurrentVB() {
          vbCX = parseFloat(svgDom.viewBox.animVal.x)
          vbCY = parseFloat(svgDom.viewBox.animVal.y)
          vbCW = parseFloat(svgDom.viewBox.animVal.width)
          vbCH = parseFloat(svgDom.viewBox.animVal.height)
        }
        // 绑定事件到dom节点，考虑到兼容性
        // function addEvent (obj, xEvent, fn) {
        //   if (obj.attachEvent) {
        //     obj.attachEvent('on' + xEvent, fn)
        //   }
        //   else {
        //     obj.addEventListener(xEvent, fn, false)
        //   }
        // }
        // console.log('###################################')
        // console.log(elem)
        // const panzoom = Panzoom(elem, {
        //   maxScale: 10
        // })
        // panzoom.pan(1360, 1360)
        // panzoom.zoom(1, { animate: true })
        // elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)
        // this.$nextTick(console.log(d3.select("#S24_4")))
        // this.renderOneStationDevices(this.test_data)
        // this.renderSingleDevice(this.new_test_data)
        // this.renderTrainDevice(this.train_data)
        // this.renderTrainDevice(this.train_data_2)
        // this.renderTrainDevice(this.train_data_3)
        // Profile().$mount('#svgTemplate');
        // console.log(d3.select("#S24_4").selectAll('#reverse').attr('stroke', 'red'))
        // d3.select('template').select('div').select('el-card')
        // console.log(d3.select('template').select('div').select('el-card'))
        // d3.select('#svgTemplate').selectAll('g').select('#S24_4').selectAll('#reverse').attr(
        //   {stroke:'red'}
        // )
        // document.getElementById('svgTemplate').appendChild(this.svgDom)
        //  svg - g
        const svgcanvasDom = document.getElementById('svgcanvas')
        // this.allDom = svgcanvasDom.getElementsByTagName("a");
        // for(let i = 0; i < this.allDom.length; i++) {
        //   // console.log(this.allDom[i].childNodes,'childNodes');
        //   let curraNodeId = this.allDom[i].id // 当前a标签节点的id,我们可以根据id获取对应节点数据并将其渲染对应的font标签上
        //   // console.log(curraNodeId, '当前a标签下的节点id----->>>')
        //   if(this.allDom[i].childNodes.length) { // 如果a标签下还有子元素
        //     //  修改节点数据(a 标签里面有 font 标签 即节点的数据)
        //     let fontDom = this.allDom[i].getElementsByTagName("font");
        //     if(fontDom.length) {
        //       // 可以根据 curraNodeId 获取该节点对应的数据并渲染到font标签上
        //       fontDom[0].innerHTML = 'self'
        //     }
        //     //  修改图片(a 标签中有 image 标签 , 即节点图片)
        //     let imageDom = this.allDom[i].getElementsByTagName("image");
        //     if(imageDom.length) {
        //       imageDom[0].attributes['xlink:href'].value = ''
        //     }
        //     //  设置支路的移动动画 (有 getTotalLength 即为线节点)
        //     if(this.allDom[i].childNodes[0].getTotalLength) {
        //       // 使不同长度线路动画速度一致
        //       let length = this.allDom[i].childNodes[0].getTotalLength()
        //       let duration = length / 50
        //       let animationString = duration.toFixed(0) + "s " + "linear infinite hacvRun";
        //       // console.log(length, "length");
        //       this.allDom[i].childNodes[0].style.strokeDashoffset = length;
        //       this.allDom[i].childNodes[0].style.animation = animationString;
        //     }
        //   }
        // }
      }
    },

    // zoomimg(x, y) {
    //   // 放大缩小
    //   // 缩放事件绑定给svg,缩放结果设置给svg内部的g标签
    //   if (!x) {
    //     x = 0;
    //   }
    //   if (!y) {
    //     y = 0;
    //   }
    //   const svg = d3.select("svg");
    //   const g = d3.select("#svgcanvas");
    //   // console.log(svg, g, "in havcZooming");
    //   //节点的缩放
    //   function zoomActions() {
    //     // console.log(d3.event, '----->>>') // undefind
    //     // g.attr("transform", d3.event.transform);
    //     g.attr("transform", d3.zoomTransform(svg.node()));
    //   }
    //   let zoomHandler = d3.zoom().on("zoom", zoomActions).scaleExtent([0.5, 40]);

    //   // zoomHandler(svg)
    //   svg.call(zoomHandler);
    //   svg.transition().duration(750).call(zoomHandler.transform, d3.zoomIdentity.translate(-x, -y).scale(2));
    //   // // 点击按钮定位
    //   // d3.select("#reset").on("click", function () {
    //   //   svg
    //   //     .transition()
    //   //     .duration(750)
    //   //     .call(zoomHandler.transform, d3.zoomIdentity);
    //   // });
    //   // d3.select('#pos1').on('click',function(){
    //   //   svg.transition().duration(750).call(zoomHandler.transform, d3.zoomIdentity.translate(-10,-1500).scale(2));
    //   // });
    //   // d3.select('#pos2').on('click',function(){
    //   //   svg.transition().duration(750).call(zoomHandler.transform, d3.zoomIdentity.translate(-1200,-10).scale(2));
    //   // });
    // },
    stringToXml(xmlString) {
      let xmlDoc = null
      if (typeof xmlString === 'string') {
        // FF
        if (document.implementation.createDocument) {
          var parser = new DOMParser()
          xmlDoc = parser.parseFromString(xmlString, 'text/xml')
        } else if (window.ActiveXObject) {
          xmlDoc = new ActiveXObject('Microsoft.XMLDOM')
          xmlDoc.async = false
          xmlDoc.loadXML(xmlString)
        }
      } else {
        xmlDoc = xmlString
      }
      return xmlDoc
    },
    renderOneStationDevices(data, props) {
      try {
        for (const key in data.tracks) {
          this.trackRender(props.stationNo, key, data.tracks[key]) // 2023_0119 去除dstate
        }
        // 信号机

        for (const key in data.signals) {
          this.signalRender(props.stationNo, key, data.signals[key])
        }
        // for (const key in data.signalStates) {
        //   const deviceObj = this.variables[data.stationNo][0][`S${data.stationNo}_${key}`]
        //   if (deviceObj) {
        //     deviceObj.value = data.signalStates[key]
        //     this.signalRender(deviceObj.svg, deviceObj.value, deviceObj.type)
        //   } else {
        //     console.log(`Cannot Find Device(stationNo:${data.stationNo} deviceName:${key} deviceType:signal) From svg.`)
        //   }
        // }
        // 道岔

        for (const key in data.switchs) {
          this.switchRender(props.stationNo, key, data.switchs[key]) // 2023_0119 去除dstate
        }
        // 区段
        for (const key in data.trackStates) {
          const deviceObj = this.variables[props.stationNo][2][`S${props.stationNo}_${key}`]
          if (deviceObj) {
            deviceObj.value = data.trackStates[key]
            this.trackRender(deviceObj.svg, deviceObj.value)
          } else {
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    signalRender(stationNo, name, state) {
      let type
      const current_svg = '#S' + stationNo + '_' + name
      if (d3.select(current_svg)._groups[0][0]) {
        type = d3.select(current_svg).attr('class')
      } else return
      if (state == 0) {
        for (const c of colorClassArray) {
          d3.select(current_svg).classed('A' + c, false)
          d3.select(current_svg).classed('B' + c, false)
        }

        return
      }
      for (const c of colorClassArray) {
        d3.select(current_svg).classed('A' + c, false)
        d3.select(current_svg).classed('B' + c, false)
      }
      type = d3.select(current_svg).attr('class')

      let colorState, isBlink
      if (state & MASK_LAMP_CLOSE) {
        colorState = 0
        isBlink = false
        this.oneSignalRender(current_svg, colorState, isBlink, 'A')
        if (type === 'signal2') {
          this.oneSignalRender(current_svg, colorState, isBlink, 'B')
        }
      } else {
        colorState = state & MASK_LAMPA_COLOR
        if (state & MASK_LAMPA_BLINK) {
          isBlink = true
        } else {
          isBlink = false
        }
        this.oneSignalRender(current_svg, colorState, isBlink, 'A')
        if (type === 'signal2') {
          colorState = (state / 16) & MASK_LAMPA_COLOR
          if (state & MASK_LAMPB_BLINK) {
            isBlink = true
          } else {
            isBlink = false
          }
          this.oneSignalRender(current_svg, colorState, isBlink, 'B')
        }
      }
    },
    oneSignalRender(current_svg, colorState, isBlink, code) {
      for (const c of colorClassArray) {
        d3.select(current_svg).classed(code + c, false)
      }
      d3.select(current_svg).classed(code + colorClassArray[colorState], true)
      if (isBlink) {
        d3.select(current_svg).classed(code + 'Blink', true)
      } else {
        d3.select(current_svg).classed(code + 'Blink', false)
      }
    },
    switchRender(stationNo, name, state) {
      var current_svg = '#S' + stationNo + '_' + name
      current_svg = current_svg.replace(/\//g, '\\/')
      var switchEle = d3.select(current_svg)
      const ins = this
      //上面的紫色线
      if (
        !d3.select(current_svg).empty() &&
        d3
          .select(current_svg)
          .select('#commonOverline')
          .empty()
      ) {
        var x1 = d3
          .select(current_svg)
          .select('#common')
          .attr('x1')
        var y1 = d3
          .select(current_svg)
          .select('#common')
          .attr('y1')
        var x2 = d3
          .select(current_svg)
          .select('#common')
          .attr('x2')
        var y2 = d3
          .select(current_svg)
          .select('#common')
          .attr('y2')
        d3.select(current_svg)
          .append('line')
          .attr('id', 'commonOverline')
          .attr('x1', x1)
          .attr('y1', parseInt(y1) - 3)
          .attr('x2', x2)
          .attr('y2', parseInt(y2) - 3)
          .attr('stroke', '#FF00FF')
          .attr('stroke-opacity', 0)
      }
      //下面的紫色线
      if (
        !d3.select(current_svg).empty() &&
        d3
          .select(current_svg)
          .select('#commonUnderline')
          .empty()
      ) {
        var x1 = d3
          .select(current_svg)
          .select('#common')
          .attr('x1')
        var y1 = d3
          .select(current_svg)
          .select('#common')
          .attr('y1')
        var x2 = d3
          .select(current_svg)
          .select('#common')
          .attr('x2')
        var y2 = d3
          .select(current_svg)
          .select('#common')
          .attr('y2')
        d3.select(current_svg)
          .append('line')
          .attr('id', 'commonUnderline')
          .attr('x1', x1)
          .attr('y1', parseInt(y1) + 3)
          .attr('x2', x2)
          .attr('y2', parseInt(y2) + 3)
          .attr('stroke', '#FF00FF')
          .attr('stroke-opacity', 0)
      }
      if (
        !d3.select(current_svg).empty() &&
        d3
          .select(current_svg)
          .select('#normalOverline')
          .empty()
      ) {
        var x1 = d3
          .select(current_svg)
          .select('#normal')
          .attr('x1')
        var y1 = d3
          .select(current_svg)
          .select('#normal')
          .attr('y1')
        var x2 = d3
          .select(current_svg)
          .select('#normal')
          .attr('x2')
        var y2 = d3
          .select(current_svg)
          .select('#normal')
          .attr('y2')
        d3.select(current_svg)
          .append('line')
          .attr('id', 'normalOverline')
          .attr('x1', x1)
          .attr('y1', parseInt(y1) - 3)
          .attr('x2', x2)
          .attr('y2', parseInt(y2) - 3)
          .attr('stroke', '#FF00FF')
          .attr('stroke-opacity', 0)
      }
      if (
        !d3.select(current_svg).empty() &&
        d3
          .select(current_svg)
          .select('#normalUnderline')
          .empty()
      ) {
        var x1 = d3
          .select(current_svg)
          .select('#normal')
          .attr('x1')
        var y1 = d3
          .select(current_svg)
          .select('#normal')
          .attr('y1')
        var x2 = d3
          .select(current_svg)
          .select('#normal')
          .attr('x2')
        var y2 = d3
          .select(current_svg)
          .select('#normal')
          .attr('y2')
        d3.select(current_svg)
          .append('line')
          .attr('id', 'normalUnderline')
          .attr('x1', x1)
          .attr('y1', parseInt(y1) + 3)
          .attr('x2', x2)
          .attr('y2', parseInt(y2) + 3)
          .attr('stroke', '#FF00FF')
          .attr('stroke-opacity', 0)
      }
      if (
        !d3.select(current_svg).empty() &&
        d3
          .select(current_svg)
          .select('#reverseOverline')
          .empty()
      ) {
        var x1 = d3
          .select(current_svg)
          .select('#reverse')
          .attr('x1')
        var y1 = d3
          .select(current_svg)
          .select('#reverse')
          .attr('y1')
        var x2 = d3
          .select(current_svg)
          .select('#reverse')
          .attr('x2')
        var y2 = d3
          .select(current_svg)
          .select('#reverse')
          .attr('y2')
        d3.select(current_svg)
          .append('line')
          .attr('id', 'reverseOverline')
          .attr('x1', x1)
          .attr('y1', parseInt(y1) - 3)
          .attr('x2', x2)
          .attr('y2', parseInt(y2) - 3)
          .attr('stroke', '#FF00FF')
          .attr('stroke-opacity', 0)
      }
      if (
        !d3.select(current_svg).empty() &&
        d3
          .select(current_svg)
          .select('#reverseUnderline')
          .empty()
      ) {
        var x1 = d3
          .select(current_svg)
          .select('#reverse')
          .attr('x1')
        var y1 = d3
          .select(current_svg)
          .select('#reverse')
          .attr('y1')
        var x2 = d3
          .select(current_svg)
          .select('#reverse')
          .attr('x2')
        var y2 = d3
          .select(current_svg)
          .select('#reverse')
          .attr('y2')
        d3.select(current_svg)
          .append('line')
          .attr('id', 'reverseUnderline')
          .attr('x1', x1)
          .attr('y1', parseInt(y1) + 3)
          .attr('x2', x2)
          .attr('y2', parseInt(y2) + 3)
          .attr('stroke', '#FF00FF')
          .attr('stroke-opacity', 0)
      }
      for (const s of switchClassArray) {
        d3.select(current_svg).classed(s, false)
      }
      for (const s of stateClassArray) {
        d3.select(current_svg).classed(s, false)
      }
      if (state == -1) {
        d3.select(current_svg).classed('None', true)
        return
      }
      let switchClass
      if (state & MASK_SWITCH_SPLIT) {
        switchClass = switchClassArray[2] // SiKai
        d3.select(current_svg).classed(switchClass, true)
      } else {
        if (state & MASK_SWITCH_NR) {
          switchClass = switchClassArray[1] // Reverse
        } else {
          switchClass = switchClassArray[0] // Normal
        }
        d3.select(current_svg).classed(switchClass, true)
      }
      let stateClass
      if (state & MASK_TRACK_OCCUPY) {
        stateClass = stateClassArray[1] // Occupy
      } else {
        if (state & MASK_TRACK_LOCK) {
          stateClass = stateClassArray[2] // Lock
        } else {
          stateClass = stateClassArray[0] // Free
        }
      }
      if (state & MASK_COMMON_LOST) {
        d3.select(current_svg)
          .select('#commonOverline')
          .attr('stroke-opacity', 1)
        d3.select(current_svg)
          .select('#commonUnderline')
          .attr('stroke-opacity', 1)
      } else {
        d3.select(current_svg)
          .select('#commonOverline')
          .attr('stroke-opacity', 0)
        d3.select(current_svg)
          .select('#commonUnderline')
          .attr('stroke-opacity', 0)
      }
      if (state & MASK_NORMAL_LOST) {
        d3.select(current_svg)
          .select('#normalOverline')
          .attr('stroke-opacity', 1)
        d3.select(current_svg)
          .select('#normalUnderline')
          .attr('stroke-opacity', 1)
      } else {
        d3.select(current_svg)
          .select('#normalOverline')
          .attr('stroke-opacity', 0)
        d3.select(current_svg)
          .select('#normalUnderline')
          .attr('stroke-opacity', 0)
      }
      if (state & MASK_REVERSE_LOST) {
        d3.select(current_svg)
          .select('#reverseOverline')
          .attr('stroke-opacity', 1)
        d3.select(current_svg)
          .select('#reverseUnderline')
          .attr('stroke-opacity', 1)
      } else {
        d3.select(current_svg)
          .select('#reverseOverline')
          .attr('stroke-opacity', 0)
        d3.select(current_svg)
          .select('#reverseUnderline')
          .attr('stroke-opacity', 0)
      }
      if (state == -1) {
        d3.select(current_svg).classed('None', true)
      } else d3.select(current_svg).classed(stateClass, true)

      var switchEle = d3.select(current_svg)
      if (!switchEle.empty()) {
        switchEle.on('click', function() {
          ins.putSqflData.stationNo = stationNo
          ins.putSqflData.type = '2'
          ins.putSqflData.trackName = name
          ins.openPutSqflDialog()
        })
      }
    },
    trackRender(stationNo, name, state) {
      var current_svg = '#S' + stationNo + '_' + name
      current_svg = current_svg.replace(/\//g, '\\/')

      for (const s of stateClassArray) {
        d3.select(current_svg).classed(s, false)
      }
      let stateClass
      if (state & MASK_TRACK_OCCUPY) {
        stateClass = stateClassArray[1] // Occupy
      } else {
        if (state & MASK_TRACK_LOCK) {
          stateClass = stateClassArray[2] // Lock
        } else {
          stateClass = stateClassArray[0] // Free
        }
      }
      if (state == -1) {
        d3.select(current_svg).classed('None', true)
      } else d3.select(current_svg).classed(stateClass, true)
      if (
        !d3.select(current_svg).empty() &&
        d3
          .select(current_svg)
          .select('#overline')
          .empty()
      ) {
        var x1 = d3
          .select(current_svg)
          .select('#track')
          .attr('x1')
        var y1 = d3
          .select(current_svg)
          .select('#track')
          .attr('y1')
        var x2 = d3
          .select(current_svg)
          .select('#track')
          .attr('x2')
        var y2 = d3
          .select(current_svg)
          .select('#track')
          .attr('y2')
        d3.select(current_svg)
          .append('line')
          .attr('id', 'overline')
          .attr('x1', x1)
          .attr('y1', parseInt(y1) - 3)
          .attr('x2', x2)
          .attr('y2', parseInt(y2) - 3)
          .attr('stroke', '#FF00FF')
          .attr('stroke-opacity', 0)
      }
      if (
        !d3.select(current_svg).empty() &&
        d3
          .select(current_svg)
          .select('#underline')
          .empty()
      ) {
        var x1 = d3
          .select(current_svg)
          .select('#track')
          .attr('x1')
        var y1 = d3
          .select(current_svg)
          .select('#track')
          .attr('y1')
        var x2 = d3
          .select(current_svg)
          .select('#track')
          .attr('x2')
        var y2 = d3
          .select(current_svg)
          .select('#track')
          .attr('y2')
        d3.select(current_svg)
          .append('line')
          .attr('id', 'underline')
          .attr('x1', x1)
          .attr('y1', parseInt(y1) + 3)
          .attr('x2', x2)
          .attr('y2', parseInt(y2) + 3)
          .attr('stroke', '#FF00FF')
          .attr('stroke-opacity', 0)
      }
      if (state != -1 && state & MASK_TRACK_LOST) {
        d3.select(current_svg)
          .select('#underline')
          .attr('stroke-opacity', 1)
        d3.select(current_svg)
          .select('#overline')
          .attr('stroke-opacity', 1)
        stateClass = 'Lost' // Lost
        //d3.select(current_svg).classed(stateClass, true)
      } else {
        d3.select(current_svg)
          .select('#underline')
          .attr('stroke-opacity', 0)
        d3.select(current_svg)
          .select('#overline')
          .attr('stroke-opacity', 0)
        stateClass = 'Lost' // Lost
        //d3.select(current_svg).classed(stateClass, false)
      }
      var trackEle = d3.select(current_svg)
      const ins = this
      if (!trackEle.empty()) {
        trackEle.on('click', function() {
          ins.putSqflData.stationNo = stationNo
          ins.putSqflData.type = '1'
          ins.putSqflData.trackName = name
          ins.openPutSqflDialog()
        })
      }
    },
    renderTrainDevice(data) {
      var coverRoute_list = new Array()
      for (const c in data.coverRoute) {
        coverRoute_list[c] = '#S' + data.coverRoute[c].stationNo + '_' + data.coverRoute[c].dname
      }
      var rightIsDown = data.coverRoute[data.end1.index].rightIsDown
      if (coverRoute_list.length != 0) {
        if (this.train_list_stationmap.includes(data.deviceId)) {
          this.updateTrainPosition(rightIsDown, coverRoute_list[data.end1.index], coverRoute_list[data.end2.index], data.deviceId, data, data.coverRoute[data.end1.index].dType, data.coverRoute[data.end2.index].dType)
        } else {
          this.createTrainPosition(coverRoute_list[data.end1.index], coverRoute_list[data.end2.index], data.deviceId, data, data.coverRoute[data.end1.index].dType, data.coverRoute[data.end2.index].dType)
          this.train_list_stationmap.push(data.deviceId)
        }
      }
    },
    updateTrainPosition(rightIsDown, position_1, position_2, deviceId, data, type_1, type_2) {
      var number1 = 0
      var number2 = 1
      if (rightIsDown == true) {
        number1 = 1
        number2 = -1
      } else {
        number1 = 0
        number2 = 1
      }
      position_1 = position_1.replace(/\//g, '\\/')
      if (this.train_lists[1] == deviceId) {
        this.selectChanged(deviceId)
      }
      var new_x1
      var old_1 = '#T' + deviceId + '_1'
      var old_2 = '#T' + deviceId + '_2'
      var old_train1 = '#T' + deviceId + '_text1'
      var old_train2 = '#T' + deviceId + '_text2'
      var old_train1_1 = '#T' + deviceId + '_text1_1'
      var old_train1_2 = '#T' + deviceId + '_text1_2'
      var old_train1_3 = '#T' + deviceId + '_text1_3'
      var old_train1_4 = '#T' + deviceId + '_text1_4'
      var old_train2_1 = '#T' + deviceId + '_text2_1'
      d3.select(old_1).remove()
      d3.select(old_train1).remove()
      d3.select(old_train2).remove()
      d3.select(old_train1_1).remove()
      d3.select(old_train1_2).remove()
      d3.select(old_train1_3).remove()
      d3.select(old_train1_4).remove()
      d3.select(old_train2_1).remove()
      d3.select(old_2).remove()
      var new_y1
      if (d3.select(position_1)._groups[0][0]) {
        if (type_1 === 'track') {
          var length = d3
            .select(position_1)
            .select('#track')
            .attr('length')
          var x1 = d3
            .select(position_1)
            .select('#track')
            .attr('x1')
          var y1 = d3
            .select(position_1)
            .select('#track')
            .attr('y1')
          var x2 = d3
            .select(position_1)
            .select('#track')
            .attr('x2')
          var y2 = d3
            .select(position_1)
            .select('#track')
            .attr('y2')
          new_x1 = parseInt(x1) + (number1 + number2 * (parseInt(data.end1.offset) / parseInt(length))) * (parseInt(x2) - parseInt(x1))
          new_y1 = parseInt(y1) + (number1 + number2 * (parseInt(data.end1.offset) / parseInt(length))) * (parseInt(y2) - parseInt(y1))
        } else {
          var dir_type = d3.select(position_1).attr('dir_type')
          if (data.coverRoute[data.end1.index].part == 'normal') {
            var length = d3
              .select(position_1)
              .select('#normal')
              .attr('length')
            var x1 = d3
              .select(position_1)
              .select('#normal')
              .attr('x1')
            var y1 = d3
              .select(position_1)
              .select('#normal')
              .attr('y1')
            var x2 = d3
              .select(position_1)
              .select('#normal')
              .attr('x2')
            var y2 = d3
              .select(position_1)
              .select('#normal')
              .attr('y2')
            if (((dir_type == 3 || dir_type == 4) && rightIsDown == false) || ((dir_type == 1 || dir_type == 2) && rightIsDown == true)) {
              new_x1 = parseInt(x1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            } else {
              new_x1 = parseInt(x1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            }
          } else if (data.coverRoute[data.end1.index].part == 'reverse') {
            var length = d3
              .select(position_1)
              .select('#reverse')
              .attr('length')
            var x1 = d3
              .select(position_1)
              .select('#reverse')
              .attr('x1')
            var y1 = d3
              .select(position_1)
              .select('#reverse')
              .attr('y1')
            var x2 = d3
              .select(position_1)
              .select('#reverse')
              .attr('x2')
            var y2 = d3
              .select(position_1)
              .select('#reverse')
              .attr('y2')
            if (((dir_type == 3 || dir_type == 4) && rightIsDown == false) || ((dir_type == 1 || dir_type == 2) && rightIsDown == true)) {
              new_x1 = parseInt(x1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            } else {
              new_x1 = parseInt(x1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            }
          } else if (data.coverRoute[data.end1.index].part == 'previous') {
            var length = d3
              .select(position_1)
              .select('#common')
              .attr('length')
            var x1 = d3
              .select(position_1)
              .select('#common')
              .attr('x1')
            var y1 = d3
              .select(position_1)
              .select('#common')
              .attr('y1')
            var x2 = d3
              .select(position_1)
              .select('#common')
              .attr('x2')
            var y2 = d3
              .select(position_1)
              .select('#common')
              .attr('y2')
            if (((dir_type == 1 || dir_type == 2) && rightIsDown == false) || ((dir_type == 3 || dir_type == 4) && rightIsDown == true)) {
              new_x1 = parseInt(x1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            } else {
              new_x1 = parseInt(x1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            }
          }
        }
      }
      var trainumber
      if (data.upDownDir == 1 && this.station_rightIsDown[data.coverRoute[data.end1.index].stationNo] == false) trainumber = deviceId + '->'
      else if (data.upDownDir == 2 && this.station_rightIsDown[data.coverRoute[data.end1.index].stationNo] == true) trainumber = deviceId + '->'
      else if (data.upDownDir == 0) trainumber = deviceId
      else trainumber = '<-' + deviceId
      if (data.end1.offset >= 0) {
        d3.select('#iSTP')
          .append('polygon')
          .attr('id', 'T' + deviceId + '_1')

          .attr('points', parseInt(new_x1) + ',' + parseInt(new_y1) + ' ' + (parseInt(new_x1) + parseInt(8)) + ',' + (parseInt(new_y1) - parseInt(15)) + ' ' + (parseInt(new_x1) - parseInt(8)) + ',' + (parseInt(new_y1) - parseInt(15)))
          .attr('fill', 'yellow')
        y1 = parseInt(y1) - parseInt(15)
        new_x1 = parseInt(new_x1) - parseInt(15)
        if (data.upDownDir == 1) new_x1 = new_x1 + parseInt(0)
        if (data.upDownDir == 2) new_x1 = new_x1 - parseInt(15)
        new_y1 -= 28
        d3.select('#iSTP')
          .append('text')
          .attr('id', 'T' + deviceId + '_text1')
          .attr('x', new_x1)
          .attr('y', new_y1)
          .attr('font-family', '宋体')
          .attr('fill', 'yellow')
          .attr('font-size', '16')
          .attr('dominant-baseline', 'hanging')
          .text(trainumber)
      }
      //         if(data.end2.offset > 0 )
      //         {
      //  <polygon points="100,10 40,180 190,60 10,60 160,180" stroke="black" stroke-width="2" fill="red" />

      //            d3.select('#iSTP').append('polygon').attr('id','T'+deviceId+'_2')
      //             .attr('points',(parseInt(x2)+parseInt(data.end2.offset)+parseInt(3))+','+(parseInt(y2)-parseInt(10))+' '+(parseInt(x2)+parseInt(data.end2.offset))+','+parseInt(y2)+' '+(parseInt(x2)+parseInt(data.end2.offset)-parseInt(3))+','+(parseInt(y2)-parseInt(10)))
      //             .attr('fill','yellow').attr('opacity','0.6')
      //             y2=parseInt(y2)-parseInt(15)
      //           var new_x2=parseInt(x2)+parseInt(data.end2.offset)-parseInt(13)
      //           d3.select('#iSTP').append('text').attr('id','T'+deviceId+'_text2')
      //             .attr('x',new_x2).attr('y',y2)
      //             .attr('font-family','宋体').attr('fill','#ffffff')
      //             .attr('font-size','10').attr('dominant-baseline','hanging')
      //             .text('列车'+deviceId)

      //         }

      var topid
      topid = '#T' + deviceId + '_1'

      var mode_list = {
        0: '无法获取',
        1: '列车',
        2: '调车'
      }
      var upDownDir_list = {
        0: '未知',
        1: '上行',
        2: '下行',
        3: '无方向'
      }
      trainumber = deviceId
      d3.select(topid)
        .on('mouseover', function(d, i) {
          // d3.select('#iSTP').append('div').attr('id','T'+deviceId+'_background')
          //   .attr('x',parseInt(new_x1)).attr('y',parseInt(y1)-parseInt(20))
          //   .attr('height','20px').attr('width','20px')
          //   .attr('background','white')
          d3.select('#iSTP')
            .append('div')
            .attr('id', 'T' + deviceId + '_text1_5')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(100))
            .attr('width', '100px')
            .attr('height', '100px')
            .attr('bakcground-color', 'white')
            .attr('dominant-baseline', 'hanging')

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_4')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(90))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('机车号:' + trainumber)

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_1')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(30))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('运行模式:' + mode_list[data.mode])

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_2')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(50))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('速度:' + (data.speed * 36) / 1000 + 'km/h')

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_3')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(70))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('上下行方向:' + upDownDir_list[data.upDownDir])
        })
        .on('mouseout', function(d, i) {
          var textid
          textid = '#T' + deviceId + '_text1_1'

          d3.select(textid).remove()
          textid = '#T' + deviceId + '_text1_2'
          d3.select(textid).remove()
          textid = '#T' + deviceId + '_text1_3'
          d3.select(textid).remove()
          textid = '#T' + deviceId + '_text1_4'
          d3.select(textid).remove()
        })

      var topid_2

      topid_2 = '#T' + deviceId + '_2'

      d3.select(topid_2)
        .on('mouseover', function(d, i) {
          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text2_1')
            .attr('x', parseInt(new_x2))
            .attr('y', parseInt(y2) - parseInt(20))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('TEST' + deviceId)
        })
        .on('mouseout', function(d, i) {
          var textid_2
          textid_2 = '#T' + deviceId + '_text2_1'

          d3.select(textid_2).remove()
        })
    },
    createTrainPosition(position_1, position_2, deviceId, data, type_1, type_2) {
      position_1 = position_1.replace(/\//g, '\\/')
      position_2 = position_2.replace(/\//g, '\\/')
      if (d3.select(position_1)._groups[0][0]) {
        if (type_1 === 'track') {
          var x1 = d3
            .select(position_1)
            .select('#track')
            .attr('x1')

          var y1 = d3
            .select(position_1)
            .select('#track')
            .attr('y1')
        } else {
          var x1 = d3
            .select(position_1)
            .select('#normal')
            .attr('x1')
          var y1 = d3
            .select(position_1)
            .select('#normal')
            .attr('y1')
        }
      }
      if (d3.select(position_2)._groups[0][0]) {
        if (type_2 === 'track') {
          var x2 = d3
            .select(position_2)
            .select('#track')
            .attr('x1')
          var y2 = d3
            .select(position_2)
            .select('#track')
            .attr('y1')
        } else {
          var x2 = d3
            .select(position_2)
            .select('#normal')
            .attr('x1')
          var y2 = d3
            .select(position_2)
            .select('#normal')
            .attr('y1')
        }
      }
      if (data.end1.offset > 0) {
        var new_x1 = parseInt(x1) + parseInt(data.end1.offset)

        d3.select('#iSTP')
          .append('polygon')
          .attr('id', 'T' + deviceId + '_1')
          .attr('points', new_x1 + ',' + parseInt(y1) + ' ' + (new_x1 + parseInt(3)) + ',' + (parseInt(y1) - parseInt(10)) + ' ' + (new_x1 - parseInt(3)) + ',' + (parseInt(y1) - parseInt(10)))
          .attr('fill', 'yellow')
          .attr('opacity', '0.6')

        y1 = parseInt(y1) - parseInt(15)
        new_x1 = parseInt(new_x1) - parseInt(13)
        d3.select('#iSTP')
          .append('text')
          .attr('id', 'T' + deviceId + '_text1')
          .attr('x', new_x1)
          .attr('y', y1)
          .attr('font-family', '宋体')
          .attr('fill', '#ffffff')
          .attr('font-size', '10')
          .attr('dominant-baseline', 'hanging')
          .text('机车' + this.trainNolist[deviceId])
      }

      var topid
      var mode_list = {
        0: '无法获取',
        1: '列车模式',
        2: '调车模式'
      }
      var upDownDir_list = {
        0: '未知',
        1: '上行',
        2: '下行',
        3: '无方向'
      }
      topid = '#T' + deviceId + '_text1'

      d3.select(topid)
        .on('mouseover', function(d, i) {
          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_1')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(20))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('运行模式:' + mode_list[data.mode])

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_2')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(40))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('速度:' + (data.speed * 36) / 1000 + 'km/h')

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_3')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(60))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('上下行方向:' + upDownDir_list[data.upDownDir])
        })
        .on('mouseout', function(d, i) {
          var textid
          textid = '#T' + deviceId + '_text1_1'

          d3.select(textid).remove()
          textid = '#T' + deviceId + '_text1_2'
          d3.select(textid).remove()
          textid = '#T' + deviceId + '_text1_3'
          d3.select(textid).remove()
        })
    },

    TrainDevices(data) {
      try {
        const trainobj = this.variables[data.deviceId][data.type][`S${data.deviceId}_${data.deviceType}`]
        const deviceObj1 = this.variables[data.stationNo][data.type][`S${data.stationNo}_${data.dname}`]
        const deviceObj2 = this.variables[data.stationNo][data.type][`S${data.stationNo}_${data.dname}`]
        const offsetX1 = data.end1.offsetX
        const offsetX2 = data.end2.offsetX
        if (trainobj) {
          this.trainender(trainobj.svg, deviceObj1.svg, deviceObj2.svg, offsetX1, offsetX2)
        } else {
        }
      } catch (error) {
        console.log(error)
      }
    },

    toggleAlarm() {
      this.showAlarm = !this.showAlarm
      if (this.showAlarm) {
        this.mapClass = 'map-body-show-alarm'
        this.toggleAlarmBtnIcon = 'el-icon-arrow-down'
      } else {
        this.mapClass = 'map-body'
        this.toggleAlarmBtnIcon = 'el-icon-arrow-up'
      }
    },
    toggleZuoyedan() {
      this.showZuoyedan = !this.showZuoyedan
      if (this.showZuoyedan) {
        if (this.showCunCheInfo) {
          this.stationMapSpan = 11
          this.zuoyedanSpan = 7
        } else {
          this.stationMapSpan = 16
          this.zuoyedanSpan = 7
        }
        this.toggleZuoyedanBtnIcon = 'el-icon-arrow-right'
      } else {
        if (this.showCunCheInfo) {
          this.stationMapSpan = 17
          this.zuoyedanSpan = 1
        } else {
          this.stationMapSpan = 22
          this.zuoyedanSpan = 1
        }
        this.toggleZuoyedanBtnIcon = 'el-icon-arrow-left'
      }
    },

    getZuoyedan(stno, workItemNo) {
      const zuoyeDanInfos = this.allStnZuoyeDanInfos[stno]
      for (let i = 0; i < zuoyeDanInfos.length; i++) {
        if (zuoyeDanInfos[i].workItemNo === workItemNo) {
          return zuoyeDanInfos[i]
        }
      }
      return {}
    },

    handleChangeWorkItemNo(workItemNo) {
      this.curWorkItem = this.getZuoyedan(this.curStnNo, workItemNo)
    },

    handleChangeStation(stnName) {
      for (const key in this.allStnInfos) {
        if (this.allStnInfos[key] === stnName) {
          this.curStnNo = key
        }
      }
    },

    getWorkMethod(workMethod) {
      if (workMethod === 1) {
        return '+'
      } else if (workMethod === 2) {
        return '-'
      } else return ''
    },

    updateRealAlarm(data, stno) {
      this.addRealTimeAlarms(data)
    },
    updateRealEvent(data, stno) {
      this.addRealTimeEvents(data)
    },
    updateZuoyedan(data, stno) {
      if (this.curStnNo === 0 || this.curStnName === '所有站') {
        this.curStnNo = stno
        this.curStnName = this.allStnInfos[stno]
      }
      // 多个站
      if (this.allStationNames.length > 3) {
        if (data && data[0].stationNo != this.curStnNo) {
          return
        }
      }
      if (this.curWorkItemNo === '' && data.length > 0) {
        this.curWorkItemNo = data[0].workItemNo
        this.curWorkItem = data[0]
      }
      if (this.curWorkItemNo && data) {
        let findSameWorkItem = false
        for (let i = 0; i < data.length; i++) {
          if (this.curWorkItemNo === data[i].workItemNo) {
            this.curWorkItem = data[i]
            findSameWorkItem = true
            break
          }
        }
        if (findSameWorkItem == false && data.length > 0) {
          this.curWorkItemNo = data[0].workItemNo
          this.curWorkItem = data[0]
        }
      }
      if (this.curWorkItem.hungItemList !== undefined) {
        for (let i = 0; i < this.curWorkItem.hungItemList.length; i++) {
          if (this.curWorkItem.hungItemList[i].hungState === 0) {
            this.firstWeimo = this.curWorkItem.hungItemList[i].hungNo
            break
          }
        }
      }
      this.allStnZuoyeDanInfos[stno] = data
    },

    closeCunCheInfo() {
      this.showCunCheInfo = false
      this.cunCheSpan = 0
      if (this.showZuoyedan) {
        this.stationMapSpan = 16
        this.zuoyedanSpan = 7
      } else {
        this.stationMapSpan = 22
        this.zuoyedanSpan = 1
      }
    },

    openCunCheInfo() {
      this.showCunCheInfo = true
      this.cunCheSpan = 5
      if (this.showZuoyedan) {
        this.stationMapSpan = 11
        this.zuoyedanSpan = 7
      } else {
        this.stationMapSpan = 17
        this.zuoyedanSpan = 1
      }
    },

    updateTracksVehicleInfo(data) {
      const stnos = []
      for (let i = 0; i < data.length; i++) {
        stnos.push(data[i].stationNo)
      }

      for (let i = 0; i < stnos.length; i++) {
        const stno = stnos[i]
        const tracks = this.stationLineData[stno].tracks
        for (const trackName in tracks) {
          var ele = '#S' + stno + '_' + trackName
          ele = ele.replace(/\//g, '\\/')
          var txtEle = d3.select(ele).select('#lowFeqLabel')
          if (!txtEle.empty()) {
            txtEle.text('')
          }
        }
      }

      for (let i = 0; i < data.length; i++) {
        const vehicleInfo = data[i]
        const stno = vehicleInfo.stationNo
        const trackName = vehicleInfo.trackName
        // let vehNo = vehicleInfo.vehNo
        const vehNo = vehicleInfo.vehNo === 0 ? '' : vehicleInfo.vehNo
        var ele = '#S' + stno + '_' + trackName
        ele = ele.replace(/\//g, '\\/')
        const ins = this
        var txtEle = d3.select(ele).select('#lowFeqLabel')
        if (!txtEle.empty()) {
          txtEle.attr('fill', 'yellow').text(vehNo)

          txtEle.on('click', function() {
            ins.openCunCheInfo()
            ins.clickedTrackName = trackName
            ins.vehicleInfoQueryData.stationNo = stno
            ins.vehicleInfoQueryData.trackName = trackName

            getVehiclesInfo(ins.vehicleInfoQueryData).then(response => {
              if (response.code == 0) {
                ins.vehicleInfos = []
                for (let j = 0; j < response.data.length; j++) {
                  ins.vehicleInfos.push(response.data[j])
                }
              }
            })
          })
        }
      }
    },

    showTaskList() {
      this.taskListDialogFormVisible = true
      this.asyncGetTaskInfo()
    },
    delTask(idx) {
      var delTaskId = this.recvTaskList[idx].taskId
      this.asyncDeleteTask(delTaskId)
    },
    openAddTaskDialog() {
      this.addTaskDialogFormVisible = true
    },
    addTask(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.asyncPostTaskInfo()
          this.addTaskDialogFormVisible = false
        } else {
          // console.log('addTask error submit!!')
          return false
        }
      })
    },
    openPutSqflDialog() {
      this.putSqflDialogFormVisible = true
    },
    setSqfl() {
      this.asyncPutSqflData()
      this.putSqflDialogFormVisible = false
    },
    async asyncGetTaskInfo() {
      const res = await getTaskInfo()
      if (res.code === 0) {
        this.taskInfoTotalDataLength = res.data.length
        this.recvTaskList = res.data
      }
    },
    async asyncDeleteTask(taskId) {
      const res = await deleteTask(taskId)
      if (res.code === 0) {
        this.$message.success('删除任务成功！')
        this.asyncGetTaskInfo()
      } else {
        this.$message.error('删除任务失败！')
      }
    },
    async asyncPostTaskInfo() {
      // console.log('asyncPostTaskInfo addTaskInfo:', this.addTaskInfo)
      const res = await postTaskInfo(this.addTaskInfo)
      if (res.code === 0) {
        this.$message.success('新增任务成功！')
        this.asyncGetTaskInfo()
      } else {
        this.$message.error('新增任务失败！')
      }
    },
    updateTrainInfo(data) {
      this.trainInfo[data.deviceId] = []
      this.trainInfoTableHeader = []
      var updown_list = {
        UP_DIRECTION: '上行',
        DOWN_DIRECTION: '下行',
        UNKOWN_DIRECTION: '未知'
      }

      var endType_list = {
        Parking_Train: '存车',
        Line_Terminal: '线路终端',
        None: ''
      }

      let cols = 0

      let xhj = data.operating.signalAhead
      let speed = Math.round(data.operating.curSpeed)
      let tsr = data.operating.curTsr
      let tsr2 = data.operating.curTsr
      let dir = updown_list[data.operating.direction]
      let distance = data.operating.signalDistance
      let pdxh = this.getLightShow(data.operating.lightShow)
      let section = data.operating.section
      let controlInform = ''
      if (data.operating.brakingType) {
        controlInform = data.operating.brakingType.description
      }

      let stopName = data.operating.stopName
      let stopDistance = data.operating.stopName ? data.operating.stopDistance : '--'
      let mode = data.operating.isolationMode == 0 ? '控车模式' : data.operating.isolationMode == 1 ? '隔离模式' : data.operating.isolationMode == 2 ? '位置丢失' : data.operating.isolationMode == 3 ? 'STP' : ''
      let ep = data.operating.operationType == 'PUSH' ? '推进' : data.operating.operationType == 'PULL' ? '牵引' : data.operating.operationType == 'SINGLE' ? '单机' : '未知'
      let stdp = ''
      let endp = ''

      if (data.operating.startTrainPosition && data.operating.startTrainPosition.dPart) {
        stdp = data.operating.startTrainPosition.dPart == 'previous' ? '岔前' : data.operating.startTrainPosition.dPart == 'normal' ? '岔后定位' : data.operating.startTrainPosition.dPart == 'reverse' ? '岔后反位' : ''
      }
      if (data.operating.endTrainPosition && data.operating.endTrainPosition.dPart) {
        endp = data.operating.endTrainPosition.dPart == 'previous' ? '岔前' : data.operating.endTrainPosition.dPart == 'normal' ? '岔后定位' : data.operating.endTrainPosition.dPart == 'reverse' ? '岔后反位' : ''
      }

      cols = 7
      if (data.operating) {
        cols += 1
        let trainNo = data.operating.trainNo
        this.trainInfo[data.deviceId].push({ span: 0, name: '机车号', val: trainNo })
      }
      console.log(data.operating, 'opo')

      this.trainInfo[data.deviceId].push({ span: 0, name: '前方信号', val: xhj })
      this.trainInfo[data.deviceId].push({ span: 0, name: '前方信号机距离', val: distance == 0 ? '--' : distance })
      this.trainInfo[data.deviceId].push({ span: 0, name: '速度km/h', val: speed })
      this.trainInfo[data.deviceId].push({ span: 0, name: '限速km/h', val: tsr2 == 255 ? '--' : tsr })
      this.trainInfo[data.deviceId].push({ span: 0, name: '方向', val: dir })
      this.trainInfo[data.deviceId].push({ span: 0, name: '停车点名称', val: stopName })
      this.trainInfo[data.deviceId].push({ span: 0, name: '停车点距离', val: stopDistance })
      this.trainInfo[data.deviceId].push({ span: 0, name: '模式', val: mode })
      this.trainInfo[data.deviceId].push({ span: 0, name: '控制信息', val: controlInform ? controlInform : '' })
      this.trainInfo[data.deviceId].push({ span: 0, name: '头部位置', val: stdp ? data.operating.startTrainPosition.cfg.name + ' - ' + stdp + ' - ' + data.operating.startTrainPosition.offset : data.operating.startTrainPosition ? data.operating.startTrainPosition.cfg.name + ' - ' + data.operating.startTrainPosition.offset : '' })
      this.trainInfo[data.deviceId].push({ span: 0, name: '尾部位置', val: endp ? data.operating.endTrainPosition.cfg.name + ' - ' + endp + ' - ' + data.operating.endTrainPosition.offset : data.operating.endTrainPosition ? data.operating.endTrainPosition.cfg.name + ' - ' + data.operating.endTrainPosition.offset : '' })
      this.trainInfo[data.deviceId].push({ span: 0, name: '平调信号', val: pdxh })
      this.trainInfo[data.deviceId].push({ span: 0, name: '推进牵引状态', val: ep })
      if (data.operating.pushWorkReturn) {
        cols += 2
        let pushWorkReturnEndType = endType_list[data.operating.pushWorkReturn.endType]
        let dis = data.operating.pushWorkReturn.dis + '米'
        this.trainInfo[data.deviceId].push({ span: 0, name: '推进作业尽头类型', val: pushWorkReturnEndType })
        this.trainInfo[data.deviceId].push({ span: 0, name: '推进作业距离提示', val: dis })
      }

      let spans = []
      if (cols === 7) spans = [1, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2]
      else if (cols === 8) spans = [1, 2, 2, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2]
      else if (cols === 9) spans = [1, 2, 2, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2]
      else if (cols === 10) spans = [1, 1, 2, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2]

      for (let i = 0; i < spans.length; i++) {
        this.trainInfo[data.deviceId][i].span = spans[i]
      }
      this.trainInfoTableHeader = this.trainInfo[data.deviceId]
    },
    getLightShow(x) {
      // 1为"停车";2为"推进";3为"启动";4为 "连挂";5为 "溜放";6为"减速";7为 "十车";8为"五车";9为 "三车";
      // 0x0e为 "故障停车";0x0b为"完毕";0x0f为 "重启";0x10-0x17为紧急制动，0x18-0x1f为解锁
      const arr = ['停车', '推进', '启动', '连挂', '溜放', '减速', '十车', '五车', '三车']
      if (x >= 1 && x <= 9) {
        return arr[x - 1]
      }
      if (x === 0x0e) {
        return '故障停车'
      }
      if (x === 0x0e) {
        return '故障停车'
      }
      if (x === 0x0b) {
        return '完毕'
      }
      if (x === 0x0f) {
        return '--'
      }
      if (x >= 0x10 && x <= 0x17) {
        return '紧急制动'
      }
      if (x >= 0x18 && x <= 0x1f) {
        return '解锁'
      }
      return ''
    },
    async asyncPutSqflData() {
      // console.log('asyncPutSqflData putSqflData:', this.putSqflData)
      const res = await putSqfl(this.putSqflData)
      if (res.code === 0) {
        this.$message.success('设置成功！')
      } else {
        console.log('asyncPutSqflData failed!')
      }
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.asyncGetTaskInfo()
    },
    handleSizeChange: function(size) {
      this.pageSize = size
      this.asyncGetTaskInfo()
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.hungState === 1) {
        return 'special-row-1'
      } else if (row.hungState === 0 && this.firstWeimo === row.hungNo) {
        return 'special-row-2'
      }
      return ''
    }
  }
}
</script>
<style>
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes run {
  from {
    stroke-dasharray: 10, 5;
  }
  to {
    stroke-dasharray: 40, 5;
  }
}

@keyframes hacvRun {
  from {
    stroke-width: 6;
    /* stroke-dashoffset: 0; */
    stroke-dasharray: 10, 8;
  }
  to {
    stroke-width: 6;
    stroke-dashoffset: 0;
    stroke-dasharray: 10, 8;
  }
}
</style>

<style lang="less">
@red: #f00;
@green: #0f0;
@yellow: #ff0;
@white: #fff;
@blue: #00f;
@gray: #808080;
@orange: #ffa500;
@noneGray: #404040;
@trackFreeBlue: #5578b6;

@keyframes signalBlink2 {
  0% {
    opacity: 1;
  }
  60% {
    fill: @noneGray;
    stroke: @noneGray;
  }
  100% {
    fill: @noneGray;
    stroke: @noneGray;
  }
}

@keyframes switchBlink {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes workAreaBlink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.track.Occupy {
  #track {
    stroke: @red;
  }
}
.track.Free {
  #track {
    stroke: @trackFreeBlue;
  }
}
.track.Lock {
  #track {
    stroke: @white;
  }
}
.track.None {
  #track {
    stroke: @noneGray;
  }
}
.track.Lost {
  #track {
    stroke: @orange;
  }
}

.switch.Normal {
  #switchLabel {
    fill: @green;
  }
  #switchNormal {
    stroke-opacity: 1;
  }
  #switchReverse {
    stroke-opacity: 0;
  }
}
.switch.Normal.Free {
  #common {
    stroke: @trackFreeBlue;
  }
  #switchNormal {
    stroke: @trackFreeBlue;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
}
.switch.Normal.Occupy {
  #common {
    stroke: @red;
  }
  #switchNormal {
    stroke: @red;
  }
  #normal {
    stroke: @red;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
}
.switch.Normal.Lock {
  #common {
    stroke: @white;
  }
  #switchNormal {
    stroke: @white;
  }
  #normal {
    stroke: @white;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
}

.switch.Normal.Lost {
  #common {
    stroke: @orange;
  }
  #switchNormal {
    stroke: @orange;
  }
  #normal {
    stroke: @orange;
  }
  #reverse {
    stroke: @orange;
  }
}

.switch.Reverse {
  #switchLabel {
    fill: @yellow;
  }
  #switchNormal {
    stroke-opacity: 0;
  }
  #switchReverse {
    stroke-opacity: 1;
  }
}
.switch.Reverse.Free {
  #common {
    stroke: @trackFreeBlue;
  }
  #switchReverse {
    stroke: @trackFreeBlue;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}
.switch.Reverse.Occupy {
  #common {
    stroke: @red;
  }
  #switchReverse {
    stroke: @red;
  }
  #reverse {
    stroke: @red;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}
.switch.Reverse.Lock {
  #common {
    stroke: @white;
  }
  #switchReverse {
    stroke: @white;
  }
  #reverse {
    stroke: @white;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}

.switch.Reverse.Lost {
  #common {
    stroke: @orange;
  }
  #switchReverse {
    stroke: @orange;
  }
  #reverse {
    stroke: @orange;
  }
  #normal {
    stroke: @orange;
  }
}

.switch.SiKai {
  #switchLabel {
    fill: @white;
    animation: switchBlink 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
  #switchNormal,
  #switchReverse {
    stroke-opacity: 0;
  }
  #common {
    stroke: @trackFreeBlue;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}
.switch.SiKai.Occupy {
  #switchLabel {
    fill: @white;
    animation: switchBlink 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
  #switchNormal,
  #switchReverse {
    stroke-opacity: 0;
  }
  #common {
    stroke: @red;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}
.switch.SiKai.Lock {
  #switchLabel {
    fill: @white;
    animation: switchBlink 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
  #switchNormal,
  #switchReverse {
    stroke-opacity: 0;
  }
  #common {
    stroke: @white;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}

.switch.SiKai.Lost {
  #switchLabel {
    fill: @orange;
    animation: switchBlink 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
  #switchNormal,
  #switchReverse {
    stroke-opacity: 0;
  }
  #common {
    stroke: @orange;
  }
  #reverse {
    stroke: @orange;
  }
  #normal {
    stroke: @orange;
  }
}

.signal1.ANone {
  #SignalBase {
    stroke: @noneGray;
  }
  #SignalA {
    stroke: @noneGray;
    fill: @noneGray;
  }
}
.signal1.ARed {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @red;
    fill: @red;
  }
}
.signal1.AGreen {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @green;
    fill: @green;
  }
}
.signal1.AYellow {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @yellow;
    fill: @yellow;
  }
}
.signal1.AWhite {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @white;
    fill: @white;
  }
}
.signal1.ABlue {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @blue;
    fill: @blue;
  }
}
.signal1.AGray {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @gray;
    fill: @gray;
  }
}
.signal2.ANone {
  #SignalBase {
    stroke: @noneGray;
  }
  #SignalA {
    stroke: @noneGray;
    fill: @noneGray;
  }
}
.signal2.ARed {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @red;
    fill: @red;
  }
}
.signal2.AGreen {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @green;
    fill: @green;
  }
}
.signal2.AYellow {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @yellow;
    fill: @yellow;
  }
}
.signal2.AWhite {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @white;
    fill: @white;
  }
}
.signal2.ABlue {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @blue;
    fill: @blue;
  }
}
.signal2.AGray {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @gray;
    fill: @gray;
  }
}
.signal2.BNone {
  #SignalBase {
    stroke: @noneGray;
  }
  #SignalB {
    stroke: @noneGray;
    fill: @noneGray;
  }
}
.signal2.BRed {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @red;
    fill: @red;
  }
}
.signal2.BGreen {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @green;
    fill: @green;
  }
}
.signal2.BYellow {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @yellow;
    fill: @yellow;
  }
}
.signal2.BWhite {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @white;
    fill: @white;
  }
}
.signal2.BBlue {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @blue;
    fill: @blue;
  }
}
.signal2.BGray {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @gray;
    fill: @gray;
  }
}
.signal1.ABlink {
  #SignalA {
    animation: signalBlink2 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
}
.signal2.ABlink {
  #SignalA {
    animation: signalBlink2 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
}
.signal2.BBlink {
  #SignalB {
    animation: signalBlink2 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
}

.workAreaLine {
  animation: workAreaBlink 2s infinite ease-in-out;
}
</style>

<style lang="less" scoped>
.svgText {
  pointer-events: none;
}
.box-card {
  background-color: transparent;
  .map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    width: 100%;
    // background-color: green;
    .el-divider {
      font-size: 40px;
    }
    .trail-box {
      display: flex;
      align-items: center;
      height: 100%;
      color: #fff;
      width: 400px;
      // background-color: yellow;
    }
    .station-choose {
      height: 100%;
      width: 700px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #909399;
      .prev-station {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
        width: 200px;
        cursor: pointer;
        // background-color: blue;
      }
      .cur-station {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 300px;
        font-size: 28px;
        font-weight: 700;
        color: #23272b;
        cursor: pointer;
        // background-color: yellow;
      }
      .next-station {
        display: flex;
        align-items: center;
        height: 100%;
        width: 200px;
        cursor: pointer;
        // background-color: purple;
      }

      // background-color: red;
    }
    .zoom-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: #fff;
      height: 100%;
      width: 400px;
      // background-color: pink;
    }
  }
  .map-body {
    height: 640px;
    width: 100%;
  }
  .map-body-show-alarm {
    height: 440px;
    width: 100%;
  }
  .map-box {
    // height: 1020px;
    height: 100%;
    width: 100%;
  }
}

.btn-area {
  background-color: #fff;
  width: 60%;
  min-width: 370px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.btn-area button {
  border: 1px solid #ddd;
  background-color: #00b0f0;
  padding: 5px 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #fff;
  margin-right: 5px;
}

.btn-area button:focus {
  outline: none;
  background-color: #23c7f0;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 700px;
}

.toggleBtn {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row-header-gap {
  color: #eae0e0;
  text-align: center;
  margin-bottom: 10px;
}

.row-body-gap {
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
}

.el-col {
  border: 1px solid transparent;
}
</style>

<style scoped>
/* 隐藏右边日期面板 */
.el-picker-panel__content.el-date-range-picker__content.is-right .el-date-table,
.el-picker-panel__content.el-date-range-picker__content.is-right .el-date-range-picker__header div {
  display: none;
}
.el-picker-panel__content.el-date-range-picker__content.is-right .el-date-range-picker__header {
  width: 60px;
  top: -331px;
  left: 430px;
}
/* 设置整体日期面板的宽度 */
.el-picker-panel.el-date-range-picker.el-popper {
  width: 522px;
}

/* 隐藏中间线段 */
.el-date-range-picker__content.is-left {
  border-right: none;
}

/* 左边日期面板宽度 */
.el-picker-panel__content {
  width: 100% !important;
}
</style>
